使用 KineticJS 沿着拱形路径可拖动、可缩放的文本答案

【问题标题】：Draggable, Sizable Text along an arch path using KineticJS使用 KineticJS 沿着拱形路径可拖动、可缩放的文本
【发布时间】：2013-07-30 01:25:42
【问题描述】：

我已经使用 KineticJS 开始了一个项目，到目前为止，我已经能够完成我想要的一切，除了沿着拱形（圆形）路径的文本。我需要的是一个相当大的、可拖动的圆形文本，并且我需要能够跟踪对象。 TextPath 对象对我不起作用，但我已经能够使用此示例中的代码开始 http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/

我能够完成的是获取此代码并移动图层（使用滑块控件）并调整属性（字体、半径、角度）以获得我正在寻找的效果。我想做的是能够创建多个图层，拖动图层，并通过制作 selectab.e 来跟上每个图层。由于我是 HTML 5（和 KineticJS）的新手并且不完全理解 layer 对象，我有几个问题可以帮助我解决我的问题。 1.) 我可以拖动图层吗？即使我使图层可拖动，我似乎也无法完成这项工作。 2.) 图层可以像组一样使用吗？它可以有大小还是默认为舞台（画布）对象的完整大小？

还有其他人在这个网站上问了一个类似的问题，但是很老，没有解决方案：

How to make dragable texts with curve using Kinetic js in canvas?

任何想法或建议将不胜感激。

【问题讨论】：

标签： kineticjs

【解决方案1】：

是的，您可以拖动图层。但是您需要在图层内添加一个“透明背景”矩形才能拖动它。像这样：

var layer = new Kinetic.Layer({draggable: true});

var bg = new Kinetic.Rect({
  width: stage.getWidth(),
  height: stage.getHeight()
});

layer.add(bg);

是的，图层可以像组一样使用，但我建议使用组来分组对象而不是图层。图层比组更昂贵，所以在有意义的情况下使用图层和组。图层和组都可以设置大小，我相信它们都默认为其中包含的对象的大小。

有关更多信息，请参阅此主题：What are the differences between group and layer in KineticJs
Textpath 应该可以满足您的需求，但您需要学习如何使用 SVG Path Data

这里还有几个可能对您有用的页面：

使用锚点调整文本大小：Drag and zoom text with Kineticjs

选择节点使用 e.targetNode: http://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/

拖放和调整大小：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

【讨论】：