带有两个锚点的线 kineticjs答案

【问题标题】：Line with two anchor points kineticjs带有两个锚点的线 kineticjs
【发布时间】：2012-12-27 07:26:54
【问题描述】：

这是我目前的状态：http://jsfiddle.net/andrewgable/Xr6mc/

    <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }

    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var lineLayer = new Kinetic.Layer();
      var flowerLayer = new Kinetic.Layer();
      var centerLayer = new Kinetic.Layer();

      var flower = new Kinetic.Group({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2
      });

      // build stem
      var stem = new Kinetic.Line({
        strokeWidth: 10,
        stroke: 'green',
        points: [{
          x: flower.getX(),
          y: flower.getY()
        }, {
          x: stage.getWidth() / 2,
          y: stage.getHeight() + 10
        }]
      });

      // build center
      var center = new Kinetic.Circle({
        x: 0,
        y: 0,
        radius: 6,
        fill: 'black',
        draggable: true,
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2
      });

      center.on('mouseover', function() {
        this.setFill('orange');
        flowerLayer.draw();
        document.body.style.cursor = 'pointer';
      });

      center.on('mouseout', function() {
        this.setFill('black');
        flowerLayer.draw();
        document.body.style.cursor = 'default';
      });


      stage.on('mouseup', function() {
        document.body.style.cursor = 'default';
      });

      lineLayer.add(stem);
      flowerLayer.add(flower);
      centerLayer.add(center);
      stage.add(lineLayer);
      stage.add(flowerLayer);
      stage.add(centerLayer);

      // keep step and flower position in sync with center
      center.on('dragstart', (function() {
        center.getLayer().afterDraw(function() {
          stem.attrs.points[0] = center.getPosition();
          flower.setPosition(center.getPosition());
          lineLayer.draw();
          flowerLayer.draw();
        });
      }));

    </script>
  </body>
</html>

只是试图使这条线可拖动（简单，将其设置为拖动）。

我希望这条线有两个锚点，都可以向任何方向拖动。

如你所见，我只需要做一个“锚点”。

如果没有锚点移动，我无法弄清楚使这成为可能的逻辑..

感谢您的帮助。

【问题讨论】：

我不确定您要问什么，在某一时刻您想要制作 2 个锚点来控制运动，您可以像您为中心所做的那样做到这一点，确保在之后添加第二个锚点干。其次，您提到您不希望锚点移动。
Here 是当前状态。您可以拖动线。但是当你这样做时，锚点不会随线拖动。我试图将它添加到一个组中，但似乎没有正确拖动。另外，我想在线上的两个圆圈拖动任一侧。
你有什么特别的理由制作这么多不同的层并将这些对象组合成组。看起来太复杂了
不是真的，JavaScript 新手！

标签： javascript html5-canvas kineticjs

【解决方案1】：

看看http://jsfiddle.net/bxGMw/

同样的逻辑可以直接从这个页面复制到你想要的地方。您可以只使用 buildAnchors 函数为形状创建锚点，并使用更新函数 redraw();

function buildAnchor(layer, x, y) {
            var anchor = new Kinetic.Circle({
                x: x,
                y: y,
                radius: 8,
                stroke: '#666',
                fill: '#ddd',
                strokeWidth: 2,
                draggable: true
            });

            // add hover styling
            anchor.on('mouseover', function() {
                document.body.style.cursor = 'pointer';
                this.setStrokeWidth(4);
                layer.draw();
            });
            anchor.on('mouseout', function() {
                document.body.style.cursor = 'default';
                this.setStrokeWidth(2);
                layer.draw();
            });

            layer.add(anchor);
            return anchor;
        }

【讨论】：

【解决方案2】：

把这段代码放在最后，去掉group1的代码

stem.on('dragmove', (function () {
  //  stem.getLayer().afterDraw(function () {
  center.setPosition([stem.getPosition().x + stem.getPoints()[0].x, stem.getPosition().y + stem.getPoints()[0].y]);
  c2.setPosition([stem.getPosition().x + stem.getPoints()[1].x, stem.getPosition().y + stem.getPoints()[1].y]);
  flower.setPosition(center.getPosition());
  lineLayer.draw();
  centerLayer.draw();
  flowerLayer.draw();
  //  });
}));

var c2 = new Kinetic.Circle({
  x: 100,
  y: 100,
  radius: 6,
  fill: 'blue',
  draggable: true,
});
centerLayer.add(c2);
c2.on('dragstart', (function () {
  c2.getLayer().afterDraw(function () {
    stem.attrs.points[1].x = c2.getX()-stem.getX();
    stem.attrs.points[1].y = c2.getY()-stem.getY();
    lineLayer.draw();
    flowerLayer.draw();
  });
}));

也改变：

center.on('dragstart', (function () {
  center.getLayer().afterDraw(function () {
   stem.attrs.points[0].x = center.getX()-stem.getX();
   stem.attrs.points[0].y = center.getY()-stem.getY();    
   flower.setPosition(center.getPosition());
   lineLayer.draw();
   flowerLayer.draw();
  });
}));

【讨论】：

感谢您迄今为止的帮助，当您在拖动后单击fiddle 上的“锚点”或圆圈时，它会变得一团糟。你知道我该如何解决吗？
是否可以在线上绘制点/锚点？我认为先画它们会起作用。但似乎没有这样做
你已经接受了这个帖子的答案......所以你的问题没有解决。这个问题是否与我上面的回答有关？对不起，但我不确定我是否明白你在这里问什么
为确保点始终在顶部，您可以将线移到底部。只是为了 stem.moveToBottom() 或 c2.moveToTop()
图层中的所有项目都有一个 z-index 并根据它进行绘制，因此如果您想将它们按特定的可见顺序放置，您可以执行 .setZIndex(number);在他们身上