使用Drag拖动和缩放文本

Question

我正在试图缩放和平移一个文本，它已经是拖拽的。所有的例子都在图像或形状上，似乎我无法将它改编成文本对象。我的问题是：

1. 我是否必须使用锚，或者是否有任何更简单的方式缩放文本的运动is？
2. 我在这里找到了一个关于缩放形状和代码崩溃的例子： var layer =新的Kinetic.Layer({ drawFunc : drawTriangle //drawTriangle三角是一个已经定义的函数})；

我们可以在创建层时调用函数吗？我通常创建一个层，然后在其中添加函数的结果。任何想法都会很好，谢谢。

Answer 1

我想出了很多方法可以做到这一点，但这是我最后实现的方法：小提琴

基本上，你有一个锚(它不一定总是在那里，你可以隐藏和显示它，如果你愿意。如果您需要帮助，请让我知道)，如果您拖下锚点，它会增加fontSize，如果拖动锚点，则会减少fontSize。

我遵循完全相同的锚教程，但是添加了一个dragBoundFunc来限制拖动到Y轴：

var anchor = new Kinetic.Circle({
    x: x,
    y: y,
    stroke: '#666',
    fill: '#ddd',
    strokeWidth: 2,
    radius: 8,
    name: name,
    draggable: true,
    dragOnTop: false,
    dragBoundFunc: function (pos) {
        return {
            x: this.getAbsolutePosition().x,
            y: pos.y
        };
    }
});

然后，我更新了updateAnchor()函数，仅检测我添加到名为sizeAnchor的组中的单个锚点。

var mY = 0;

function update(activeAnchor, event) {
  var group = activeAnchor.getParent();
  var sizeAnchor = group.get('.sizeAnchor')[0];
  var text = group.get('.text')[0];

  if (event.pageY < mY) {
    text.setFontSize(text.getFontSize()-1);
  } else {
    text.setFontSize(text.getFontSize()+1);
  }

  sizeAnchor.setPosition(-10, 0);

  mY = event.pageY;
}

基本上，使用mY与e.PageY进行比较，查看鼠标是向上还是向下移动。一旦我们可以确定鼠标方向，那么我们就可以决定我们应该增加还是减少fontSize！

或者，您可以使用鼠标轮做完全相同的事情！我没有亲自实现它，但它绝对可行。类似于：

1. 鼠标滚轮下降，fontSize降低
2. 鼠标滚轮上升，fontSize增加

希望这能模仿你的“放大”文本。我想，能够拖动文本就像“平移”一样，对吧？

更新(基于下面的评论)

这就是使用dragBoundFunc限制拖动到Y轴的方法。

var textGroup = new Kinetic.Group({
    x: 100,
    y: 100,
    draggable: true,
    dragBoundFunc: function (pos) {
        return {
            x: this.getAbsolutePosition().x,
            y: pos.y
        };
    }
});

请参阅更新的小提琴 (与上述相同)