KonvaJS：如何在调整大小时更改文本类属性（fontSize，height和width）？

Question

我想在KonvaJS中调整文本图层的大小。我的代码看起来像：

var Canvas = (function() {
    var funct = {};
    var stageWidth,stageHeight,stage,layer,circle,rect,myPlayer,textNode,tr;

    funct.stageInit = function(){
      stage = new Konva.Stage({
        container: 'canvas',
        width: stageWidth,
        height: stageHeight
      });

      layer = new Konva.Layer();
      stage.add(layer);

      funct.addText();
      funct.makeTextResizeable();
      layer.draw();
    }

    funct.addText = function(){
      textNode = new Konva.Text({
        text: 'Some text here',
        x: 50,
        y: 50,
        width: 50,
        height: 50,
        fontSize: 20,
        draggable: true,
      });

      layer.add(textNode);

      textNode.on('dblclick', () => {
        // create textarea over canvas with absolute position

        // first we need to find its positon
        var textPosition = textNode.getAbsolutePosition();
        var stageBox = stage.getContainer().getBoundingClientRect();

        var areaPosition = {
          x: textPosition.x + stageBox.left,
          y: textPosition.y + stageBox.top
        };


        // create textarea and style it
        var textarea = document.createElement('textarea');
        document.body.appendChild(textarea);

        textarea.value = textNode.text();
        textarea.style.position = 'absolute';
        textarea.style.top = areaPosition.y + 'px';
        textarea.style.left = areaPosition.x + 'px';
        textarea.style.width = textNode.width();
        textarea.style.zIndex = 15;

        textarea.focus();


        textarea.addEventListener('keydown', function (e) {
          if (e.keyCode === 13) {
            textNode.text(textarea.value);
            layer.draw();
            document.body.removeChild(textarea);
          }
        });
      });
    }

    funct.makeTextResizeable = function(){
      tr = new Konva.Transformer({
        boundBoxFunc: function (oldBoundBox, newBoundBox) {
          if (newBoundBox.width > 200) {
            return oldBoundBox;
          }
          textNode.attrs.fontSize = (newBoundBox.width/oldBoundBox.width)*textNode.attrs.fontSize;
          textNode.attrs.width = (newBoundBox.width/oldBoundBox.width)*textNode.attrs.width;
          textNode.attrs.height = (newBoundBox.width/oldBoundBox.width)*textNode.attrs.height;
          console.log(textNode.attrs.fontSize);
          return newBoundBox
        },
        isTransforming: function(){
          console.log('a');
        }
      });
      layer.add(tr);
      tr.attachTo(textNode);
    }

    funct.fitStageIntoParentContainer = function(){
      var container = document.querySelector('#canvas-container');
      var containerWidth = container.offsetWidth;
      var scale = containerWidth / stageWidth;

      stage.width(stageWidth * scale);
      stage.height(stageHeight * scale);
      stage.scale({ x: scale, y: scale });
      stage.draw();
    }

    funct.Onresize = function(){
      window.addEventListener('resize', function(){
        funct.fitStageIntoParentContainer();
      });
    }

    funct.init = function(){
      stageHeight = $('.vjs-poster').height();
      stageWidth =  $('.vjs-poster').width();
      funct.stageInit();
      funct.Onresize();
    }
    return funct;
  })();  

我想允许通过拖动来调整文本图层的大小，并相应地更改字体的大小。我还希望根据文本图层的大小来包装/解包文本。

https://jsfiddle.net/gentrobot/5gk1h67u/

要求是能够在运行时动态添加文本，调整大小并重新定位它，然后获取文本，文本容器和文本容器坐标的最终大小，以保存它。从这些信息中，将生成带有动态添加文本的HTML，位于主元素上。

我可以调整文本的大小，但它没有平滑调整大小并且在调整大小时不会换行。虽然，一旦完成，我也能够提取最终坐标和大小。

Answer 1

可能你不需要在转换文本时更改scale。您可以在每个transform事件中重置它：

tr.on('transform', function() {
     textNode.setAttrs({
         width: textNode.width() * textNode.scaleX(),
         height: textNode.height() * textNode.scaleY(),
         scaleX: 1,
         scaleY: 1,
     });
})

另外，对于更好的UX，您可以限制一些尺寸：

  tr = new Konva.Transformer({
    boundBoxFunc: function (oldBoundBox, newBoundBox) {
      if (newBoundBox.width > 200 || newBoundBox.width < textNode.fontSize()) {
        return oldBoundBox;
      } else if (newBoundBox.height < textNode.fontSize()) {
        return oldBoundBox;
      }
      return newBoundBox
    }
});

但是：ぁzxswい

如果你需要在转换时更改https://jsfiddle.net/dgL1kvcb/1/，则需要定义其逻辑。如果你想要包装和字体大小改变它将如何工作？