Question

如何使用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"
});

提前感谢。

Answer 1

使用裁剪属性。

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>

带有9个参数的DrawImage与kinetic js

1 个答案: