Question

我抓住了一个缩放和拖动HTML5 Canvas Tutorials图像的工作示例，但我希望使用矩形实现相同的效果。

当我调整代码以使用Rect时，锚点会停止在Rect之后。让这个工作的秘诀是什么？

感谢您的任何提示！

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>

    <style>
        #container{
            float:left;
            border:1px solid red;
            width:930px;
            height:400px;
        }
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
</head>
<body onmousedown="return false;">
<div id="container"></div>
<script>
  function update(activeAnchor) {
    var group = activeAnchor.getParent();

    var topLeft = group.get('.topLeft')[0];
    var topRight = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft = group.get('.bottomLeft')[0];
    var mask = group.get('.mask')[0];

    var anchorX = activeAnchor.getX();
    var anchorY = activeAnchor.getY();

    // update anchor positions
    switch (activeAnchor.getName()) {
      case 'topLeft':
        topRight.setY(anchorY);
        bottomLeft.setX(anchorX);
        break;
      case 'topRight':
        topLeft.setY(anchorY);
        bottomRight.setX(anchorX);
        break;
      case 'bottomRight':
        bottomLeft.setY(anchorY);
        topRight.setX(anchorX); 
        break;
      case 'bottomLeft':
        bottomRight.setY(anchorY);
        topLeft.setX(anchorX); 
        break;
    }

    mask.setPosition(topLeft.getPosition());

    var width = topRight.getX() - topLeft.getX();
    var height = bottomLeft.getY() - topLeft.getY();
    if(width && height) {
      mask.setSize(width, height);
    }
  }

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

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

    anchor.on('dragmove', function() {
      update(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);
  }
  function initStage() {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 930,
      height: 400
    });
    var redGroup = new Kinetic.Group({
      x: 270,
      y: 100,
      draggable: true
    });
    var greenGroup = new Kinetic.Group({
      x: 100,
      y: 110,
      draggable: true
    });
    var layer = new Kinetic.Layer();

    layer.add(redGroup);
    layer.add(greenGroup);
    stage.add(layer);

    // red 
    var redRect = new Kinetic.Rect({
      x: 0,
      y: 0,
      name: 'mask',
      width: 100,
      height: 100,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 1,
      opacity:0.5,
      draggable:true
    });

    redGroup.add(redRect);
    addAnchor(redGroup, 0, 0, 'topLeft');
    addAnchor(redGroup, 100, 0, 'topRight');
    addAnchor(redGroup, 100, 100, 'bottomRight');
    addAnchor(redGroup, 0, 100, 'bottomLeft');

    redGroup.on('dragstart', function() {
      this.moveToTop();
    });

    // green
    var greenRect = new Kinetic.Rect({
      x: 0,
      y: 0,
      name: 'mask',
      width: 100,
      height: 100,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 1,
      opacity:0.5,
      draggable:true
    });

    greenGroup.add(greenRect);
    addAnchor(greenGroup, 0, 0, 'topLeft');
    addAnchor(greenGroup, 100, 0, 'topRight');
    addAnchor(greenGroup, 100, 100, 'bottomRight');
    addAnchor(greenGroup, 0, 100, 'bottomLeft');

    greenGroup.on('dragstart', function() {
      this.moveToTop();
    });

    stage.draw();
  }

  initStage();

</script>

</body>
</html>

Answer 1

因为你使矩形也可以拖动，只需删除它就可以了。顺便说一句，谢谢你的解决方案我需要非常相似的东西。：）

这是你的工作：

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <style>
        #container {
            float: left;
            border: 1px solid red;
            width: 930px;
            height: 400px;
        }

        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body onmousedown="return false;">
    <div id="container"></div>
    <script>
        function update(activeAnchor) {
            var group = activeAnchor.getParent();

            var topLeft = group.get('.topLeft')[0];
            var topRight = group.get('.topRight')[0];
            var bottomRight = group.get('.bottomRight')[0];
            var bottomLeft = group.get('.bottomLeft')[0];
            var mask = group.get('.mask')[0];

            var anchorX = activeAnchor.getX();
            var anchorY = activeAnchor.getY();

            // update anchor positions
            switch (activeAnchor.getName()) {
                case 'topLeft':
                    topRight.setY(anchorY);
                    bottomLeft.setX(anchorX);
                    break;
                case 'topRight':
                    topLeft.setY(anchorY);
                    bottomRight.setX(anchorX);
                    break;
                case 'bottomRight':
                    bottomLeft.setY(anchorY);
                    topRight.setX(anchorX);
                    break;
                case 'bottomLeft':
                    bottomRight.setY(anchorY);
                    topLeft.setX(anchorX);
                    break;
            }

            mask.setPosition(topLeft.getPosition());

            var width = topRight.getX() - topLeft.getX();
            var height = bottomLeft.getY() - topLeft.getY();
            if (width && height) {
                mask.setSize(width, height);
            }
        }

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

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

            anchor.on('dragmove', function () {
                update(this);
                layer.draw();
            });
            anchor.on('mousedown touchstart', function () {
                group.setDraggable(false);
                this.moveToTop();
            });
            anchor.on('dragend', function () {
                group.setDraggable(true);
                layer.draw();
                update(this);
            });
            // 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);
        }
        function initStage() {
            var stage = new Kinetic.Stage({
                container: 'container',
                width: 930,
                height: 400
            });
            var redGroup = new Kinetic.Group({
                x: 270,
                y: 100,
                draggable: true
            });
            var greenGroup = new Kinetic.Group({
                x: 100,
                y: 110,
                draggable: true
            });
            var layer = new Kinetic.Layer();

            layer.add(redGroup);
            layer.add(greenGroup);
            stage.add(layer);

            // red 
            var redRect = new Kinetic.Rect({
                x: 0,
                y: 0,
                name: 'mask',
                width: 100,
                height: 100,
                fill: 'red',
                stroke: 'black',
                strokeWidth: 1,
                opacity: 0.5
            });

            redGroup.add(redRect);
            addAnchor(redGroup, 0, 0, 'topLeft');
            addAnchor(redGroup, 100, 0, 'topRight');
            addAnchor(redGroup, 100, 100, 'bottomRight');
            addAnchor(redGroup, 0, 100, 'bottomLeft');

            redGroup.on('dragstart', function () {
                this.moveToTop();
            });

            // green
            var greenRect = new Kinetic.Rect({
                x: 0,
                y: 0,
                name: 'mask',
                width: 100,
                height: 100,
                fill: 'green',
                stroke: 'black',
                strokeWidth: 1,
                opacity: 0.5
            });

            greenGroup.add(greenRect);
            addAnchor(greenGroup, 0, 0, 'topLeft');
            addAnchor(greenGroup, 100, 0, 'topRight');
            addAnchor(greenGroup, 100, 100, 'bottomRight');
            addAnchor(greenGroup, 0, 100, 'bottomLeft');

            greenGroup.on('dragstart', function () {
                this.moveToTop();
            });

            stage.draw();
        }

        initStage();

    </script>

</body>
</html>

KineticJs锚点不会跟随同一组中的矩形

1 个答案: