使用Kineticjs拖放文本

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

我是否必须使用锚或使用Kineticjs缩放文本的任何简单方法？

我发现关于缩放形状的例子和代码崩溃这里：

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

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

来源

2013-07-09 bouk

我假设你要脱离本教程：http://tech.joshuacummings.com/2012/07/scalable-draggable-anchored-triangle-in.html，他使用的是KineticJS 3.10。0这是非常过时的。你能否更详细地描述你的缩放和平移文本的含义？你想要文字大小增加/减少？或者实际上放大比例？除了拖动文本之外，你想如何平移文本？ – projeqht

感谢您的建议。我估计他正在使用的KineticsJS版本。我想这样做：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/，但与文本对象，而不是图像，因此没有loadImages功能。我可以拖放它，但不能像示例中那样缩放它。似乎无法使它工作:( – bouk

我想了许多办法可以做到这一点，但是这是一个我最终实现：jsfiddle

基本上，你有一个锚（这并不总是必须在那里，你可以隐藏和显示如果你需要帮助，请告诉我）如果你拖动锚点，它会增加fontSize，如果你拖动锚点，它会减少fontSize。

我跟着完全相同的anchor tutorial而是我添加了一个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！

另外，你可以使用鼠标滚轮来做同样的事情！我没有自己实现它，但它绝对是可行的。喜欢的东西：

鼠标滚轮向下，fontSize降低
滚轮上和fontSize增加

希望这个模拟“放大”一个给你的文本。我想能够拖动文本行为“平移”的权利？

UPDATE（基于下面的评论）

这是你将如何限制使用dragBoundFunc拖动到Y轴：

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-11 19:13:36 projeqht

尝试了你的jsfiddle，这正是我所需要的，今天会试着去适应我的代码，并且除非你点击文本来隐藏锚点，会让你更新。 – bouk

嘿，我再次设法适应你的代码，我的工作很好，唯一的问题是我需要垂直拖拽文本（y），就好像我尝试了一样在x上移动一点它就会消失因此，我仍然不能使用它，因为当然我不能限制用户严格垂直拖动文本任何建议？ – bouk

更新了我的答案，希望这就是你正在寻找的东西祝你好运！ – projeqht

使用Kineticjs拖放文本

回答

相关问题