Question

在过去的几天里，我一直在玩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);


  }

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

感谢您的帮助......

Answer 1

我认为您需要将新的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。

编辑：另见here。

将kineticJS画布上的锚点更改为箭头？

1 个答案: