Text 使用Kineticjs拖动和缩放文本

我正在尝试缩放和平移已经可以拖动的文本。所有的例子都是关于图像或形状的，似乎我无法将其应用于文本对象。我的问题是：

我是否必须使用锚定或使用Kineticjs缩放文本的更简单方法

我发现了一个关于缩放形状的示例，代码在此崩溃：

  var layer = new Kinetic.Layer({
     drawFunc : drawTriangle  //drawTriangle is a function defined already
  });

我们可以在创建层时调用函数吗？ 我通常创建一个层，然后在其中添加函数的结果。

---

任何想法都很好，谢谢。

我想了很多方法可以做到这一点，但这是我最终实现的方法：

基本上，你有一个锚（不一定总是在那里，如果你愿意，你可以隐藏和显示它。如果你需要帮助，请告诉我），如果你向下拖动锚，它会增加

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

---

查看更新的（与上面相同的JSFIDLE）

我假设您已经脱离了本教程：在本教程中，他使用的是非常过时的KineticJS 3.10.0。您能更详细地描述一下缩放和平移文本的含义吗？是否要增大/减小文本大小？或者用比例放大？除了拖动文本，您还想如何平移文本？谢谢projeqht的建议。我低估了他使用的KineticsJS版本。我想这样做：但是使用文本对象而不是图像，因此没有loadImages函数。我可以拖放它，但不能像示例中那样缩放它。似乎无法使其工作：（尝试了你的JSFIDLE。这正是我所需要的。我今天将尝试将其调整到我的代码中，并隐藏锚定，除非你单击文本。我会让你保持更新。非常感谢，因为我已经将此任务推迟了一周。嘿，我又一次。我成功地将你的代码调整到我的代码中，它工作正常。唯一的问题是我需要拖动文本。）在垂直方向（y）上拖动，就好像我试图在x上移动它一点点，它就会消失。因此，我仍然不能使用它，因为我当然不能限制用户严格垂直拖动文本。有什么建议吗？更新了我的答案，希望这就是你想要的！祝你好运！仍然没有运气。当我单击并尝试拖动我写的第一个文本时（作为输入插入），它会自动将其缩放到超出画布并消失。所有这些都在1秒内完成，因此我甚至没有时间对其进行适当的处理。我成功地解决了问题。我将text.getFontSize（）更改为+3&-3，而不是-1&+1。非常感谢，最后我终于解决了问题。

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