Question

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

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

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

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

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

Answer 1

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

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

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

layer.add(bg);

是的图层可以像群组一样使用，但我会推荐使用群组来分组对象而不是图层。图层比组更贵，因此使用图层和图层。它使感觉的群体。图层＆amp;组可以设置大小，我相信它们都默认为包含在其中的对象的大小。

有关详细信息，请参阅此主题：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/

拖动＆amp;掉落＆amp;调整大小：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

使用KineticJS沿着弧形路径拖拽可调整大小的文本

1 个答案: