1

だから、私は下の画像が設定したHTML5キャンバスのクリッピング境界を尊重するようにしようとしていますが、それはDIV境​​界のみを尊重し、一方で円は完全な境界を尊重します

kinetic.jsで作成された画像でhtml5クリッピングを使用するにはどうすればよいですか

デモへのリンク: 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