0

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

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

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

如何在画布中使用 Kinetic js 制作带有曲线的可拖动文本？

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

4

1 回答 1

1

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

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

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

layer.add(bg);

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

    有关更多信息，请参阅此线程：KineticJs 中组和层之间的区别是什么

  3. Textpath应该可以满足您的需求，但您需要学习如何使用SVG 路径数据

以下是其他几个可能对您有用的页面：

使用锚来调整文本大小：使用 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/

于 2013-07-29T17:05:14.400 回答