1

在过去的几天里，我一直在玩 kineticjs 和画布。我有一个拖放画布，可以加载可调整大小的图像。可调整大小的图像上的锚点是圆圈：

var anchor;

  function addAnchor(group, x, y, name) {
    var stage = group.getStage();
    var layer = group.getLayer();

    anchor = new Kinetic.Circle({
      x: x,
      y: y,
      stroke: "#666",
      fill: "#ddd",
      strokeWidth: 2,
      radius: 8,
      name: name,
      draggable: true
            });                   


    anchor.on("dragmove", function() {
      update(group, this);
      layer.draw();
    });
    anchor.on("mousedown touchstart", function() {
      group.setDraggable(false);
      this.moveToTop();
    });
    anchor.on("dragend", function() {
      group.setDraggable(true);
      layer.draw();
    });
    // add hover styling
    anchor.on("mouseover", function() {
      var layer = this.getLayer();
      document.body.style.cursor = "pointer";
      this.setStrokeWidth(4);
      layer.draw();
    });
    anchor.on("mouseout", function() {
      var layer = this.getLayer();
      document.body.style.cursor = "default";
      this.setStrokeWidth(2);
      layer.draw();
    });

    group.add(anchor);


  }

我想把它们变成箭头，或者类似的东西来向用户展示图像实际上是可调整大小的。有没有人有这样做的方法或教程可以告诉我如何绘制箭头或用图像替换锚点？

谢谢你的帮助...

4

1 回答 1

3

我认为您需要将新的 Kinetic.Cirle 及其属性更改为如下所示：

var anchor = new Kinetic.RegularPolygon({
      x: x,
      y: y,
      sides: 3,
      rotation: -190,
      radius: 8,
      stroke: "black",
      strokeWidth: 2,
      name: name,
      draggable: true
    });

虽然这只是开始，但由于每个锚点的旋转不同，您还必须向锚点组添加更多变量，以使每个三角形朝向正确的方向。

我只是简单地测试了这个，但我希望它作为一个起点有所帮助。

记得仔细检查Docs。

编辑：另见此处。

于 2012-07-30T21:07:33.757 回答