Home/ Questions/Q 9122309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:04:21+00:00

Here is my current state: http://jsfiddle.net/andrewgable/Xr6mc/ <!DOCTYPE HTML> <html> <head> <style> body { margin:

  • 0

Here is my current state: 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>

Just trying to make this line draggable (Easy, set it to drag).

And I want the line to have two anchor points, both can be draged in any direction.

As you can see I have only got to making one “anchor” point.

I cannot figure out the logic to make this possible, without the anchors moving about..

Thanks for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take a look at http://jsfiddle.net/bxGMw/

    The same logic can be copied right over from this page to what you want. You could just use a buildAnchors function to create the anchors for a shape, and an update function to 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;
        }
    • 0