KonvaJS：如何在调整大小时更改文本 class 属性（字体大小、高度和宽度）？

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

我想允许通过拖动来调整文本层的大小，并相应地更改字体的大小。我也想把文字改成wrap/unwrap，根据文字层的大小

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,
     });
})

此外，为了更好的用户体验，您可以限制一些尺寸：

  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
    }
});

演示：https://jsfiddle.net/dgL1kvcb/1/

如果您在转换时也需要更改 fontSize，则需要定义其逻辑。如果您想要换行和字体大小都更改，它将如何工作？

KonvaJS：如何在调整大小时更改文本 class 属性（字体大小、高度和宽度）？

KonvaJS: How to change the text class properties (fontSize, height & width) on resize in?

javascript

konvajs