有没有办法增加和减小fabricjs onclick中的字体大小

时间:2019-06-12 09:56:28

标签: vue.js fabricjs font-size

这些是我的步骤:

  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,

        }));
      });

1 个答案:

答案 0 :(得分:0)

知道了

     $('.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);
        }
      });