时间戳

首页 > 解决方案 > 有没有办法在fabricjs onclick中增加和减少字体大小

vue.js - 有没有办法在fabricjs onclick中增加和减少字体大小

问题描述

这些是我的步骤：

  1. 添加虚拟文本
  2. 单击按钮时增加/减小字体大小

我正在使用 Vue、Javascript 和 jQuery。现在我得到了正确的字体大小，但只有当我添加新文本时。但它应该是动态的。

谢谢帮助

 <input type='button' value='-' class='qtyminus' field='quantity' />
 <input type='text' name='quantity' value='0' class='qty' />
 <input type='button' value='+' class='qtyplus' field='quantity' />


 var currentVal = 12;


      $('.qtyplus').click(function(e){

        e.preventDefault();

        currentVal = parseInt($('input[name=quantity]').val());

        if (!isNaN(currentVal)) {

          $('input[name=quantity]').val(currentVal + 1);
        } else {

          $('input[name=quantity]').val(0);
        }
      });
      $(".qtyminus").click(function(e) {

        e.preventDefault();


        currentVal = parseInt($('input[name=quantity]').val());
        if (!isNaN(currentVal) && currentVal > 0) {

          $('input[name=quantity]').val(currentVal - 1);
        } else {

          $('input[name=quantity]').val(0);
        }
      });

      document.getElementById('buttonFabric').addEventListener("change", function (e) {
        canvas.add(new fabric.IText('Tap and Type', {
          left: 0,
          top:   0,
          fontFamily: 'arial black',
          fill: '#333',
          fontSize: currentVal,

        }));
      });

标签： vue.jsfabricjsfont-size

解决方案

知道了

     $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name

        // Get its current value
        currentVal = parseInt($('input[name=quantity]').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
          // Increment
          $('input[name=quantity]').val(currentVal + 1);

          if(currentVal!='')
          {
            var activeObj = canvas.getActiveObject();
            //Check that text is selected
            if(activeObj==undefined)
            {
              alert('Please select a Text');
              return false;
            }
            activeObj.set({
              scaleX:1,
              scaleY:1,
              fontSize: currentVal
            });
            canvas.renderAll();
          }

        } else {
          // Otherwise put a 0 there
          $('input[name=quantity]').val(0);
        }
      });
      // This button will decrement the value till 0
      $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name

        // Get its current value
        currentVal = parseInt($('input[name=quantity]').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
          // Decrement one
          $('input[name=quantity]').val(currentVal - 1);

          if(currentVal!='')
          {
            var activeObj = canvas.getActiveObject();
            //Check that text is selected
            if(activeObj==undefined)
            {
              alert('Please select a Text');
              return false;
            }
            activeObj.set({
              scaleX:1,
              scaleY:1,
              fontSize: currentVal
            });
            canvas.renderAll();
          }

        } else {
          // Otherwise put a 0 there
          $('input[name=quantity]').val(0);
        }
      });

推荐阅读