0

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

  1. 我必须使用锚点还是使用 Kineticjs 缩放文本的更简单方法？

  2. 我找到了一个关于缩放形状的示例，代码在这里崩溃：

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

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

4

1 回答 1

0

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

基本上，你有一个锚（它并不总是必须在那里，如果你愿意，你可以隐藏和显示它。如果你需要帮助，请告诉我），如果你向下拖动锚，它会增加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增加

希望这可以为您模拟“缩放”文本。而且我猜能够拖动文本作为“平移”对吗？

更新（基于下面的评论）

这就是您如何限制拖动到 Y 轴的方法dragBoundFunc：

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

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

于 2013-07-11T19:13:36.833 回答