1

所以，我试图让下面的图像尊重我设置的 HTML5 画布剪辑边界，但它只尊重 DIV 边界，另一方面，圆圈尊重完整边界

那么如何将 html5 剪辑与 kinetic.js 创建的图像一起使用

演示链接：http ://shedlimited.debrucellc.com/test3/canvaskinclip.html

--> 主要问题：蓝色球尊重 HTML5 剪辑边框，但可拖动的 Darthvader 图像没有（我想让可拖动的 darthvader 尊重它）

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.8.3.js">
</script>
 <body>
<div id="container"></div>
<script>
    window.onload = function(){
        var stage = new Kinetic.Stage("container", 425, 405);
        var layer = new Kinetic.Layer();
           var background_layer = new Kinetic.Layer();
        var draggingShape = undefined;
        var imageObj = new Image();
        imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


        var darthVaderImg = new Kinetic.Image({
      image: imageObj,

      width: 200,
      height: 137,
      draggable: true


    });
        // circle
        var circle = new Kinetic.Shape({



            drawFunc: function(){
                var context = this.getContext();

                // draw clipping rectangle
               context.beginPath();
  context.moveTo(5, 5);
  context.lineTo(34, 202);

  context.lineTo(2, 405);
  context.lineTo(212, 385);
  context.lineTo(425, 405);
  context.lineTo(400, 202);
  context.lineTo(415, 10);
  context.lineTo(212, 25);
                context.clip();

                // draw circle


                imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
                 context.drawImage(imageObj,0,0);
                context.beginPath();
                context.arc(this._x, this._y, 50, 0, 2 * Math.PI, false);
                context.fillStyle = "blue";
                context.fill();
                context.closePath();
            },
            // custom properties
            _x: 300,
            _y: 50
        });

        circle.on("mousedown", function(){
            draggingShape = this;
            var mousePos = stage.getMousePosition();
            draggingRectOffsetX = mousePos.x - circle._x;
            draggingRectOffsetY = mousePos.y - circle._y;
        });
        circle.on("mouseover", function(){
            document.body.style.cursor = "pointer";
        });
        circle.on("mouseout", function(){
            document.body.style.cursor = "default";
        });

        layer.add(circle);

        stage.on("mouseout", function(){
            draggingShape = undefined;
        }, false);

        stage.on("mousemove", function(){
            var mousePos = stage.getMousePosition();
            if (draggingShape) {
                draggingShape._x = mousePos.x - draggingRectOffsetX;
                draggingShape._y = mousePos.y - draggingRectOffsetY;

                layer.draw();
            }
        }, false);

        stage.on("mouseup", function(){
            draggingShape = undefined;
        });




           var Bg = new Image();
    Bg.onload = function() {
            var Bg_image = new Kinetic.Image({
            image: Bg
        });
        background_layer.add(Bg_image);
        stage.add(background_layer);
    layer.add(darthVaderImg);

        stage.add(layer);
    };
    Bg.src = "centerpillow1.png";
    }


</script>

4

0 回答 0