0

Kineticsの画像オブジェクトを9つの引数で画像を描画するために使用するにはどうすればよいですか？たとえば、私のコードは

 ctx.drawImage(imageObj, x, y, w, h, canvasWidth, canvasHeight, w, h);

これを画像オブジェクトに合わせるにはどうすればよいですか？

image = new Kinetic.Image({
    image: imageObj,
    x: x,
    y: y,
    width: w,
    height: h,
    name: "image"
});

前もって感謝します。

4

1 に答える 1

4

クロップ属性を使用します。

ctx.drawImage(imageObj, x_crop, y_crop, w_crop, h_crop, x, y, w, h);

<!-- is equivalent >

var image = new Kinetic.Image({
    x: x,
    y: y,
    width: w,
    height: h,
    name: "image", 
    image: imageObj, 
    crop: [x_crop, y_crop, w_crop, h_crop]
});

以下の例を試してください（キャンバスのみを使用してからKineticを使用した同じトリミング）：

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <p>Image to use:</p>
        <img id="yoda" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" alt="yoda" width="213" height="236" />

        <p>Canvas:</p>
        <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
        </canvas>

        <p>Kineticjs:</p>
        <div id="container" style="border:1px solid #d3d3d3; width:300px; height: 300px"></div>

        <script src="kinetic-v3.10.5.js"></script>
        <script>
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var img=document.getElementById("yoda");
            ctx.drawImage(img, 40, 30, 90, 90, 10, 10, 90, 90);

            var stage = new Kinetic.Stage({
                container: "container",
                width: 250,
                height: 300
            });

            var layer = new Kinetic.Layer();
            var imageObj = new Image();

            imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
            var image = new Kinetic.Image({
                x: 10,
                y: 10,
                width: 90,
                height: 90,
                name: "image", 
                image: imageObj, 
                crop: [40, 30, 90, 90]
            });

            layer.add(image);
            stage.add(layer);

        </script>
    </body>
</html>
于 2012-09-05T13:14:18.213 に答える