Есть ли способ увеличить и уменьшить размер шрифта в fabricjs onclick - PullRequest
Новая
       29

Есть ли способ увеличить и уменьшить размер шрифта в fabricjs onclick

0 голосов
/ 12 июня 2019

Вот мои шаги:

  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 голосов
/ 12 июня 2019

Понял 

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