带有 9 个参数的 DrawImage 与动力学 js答案

【问题标题】：DrawImage with 9 arguments with kinetic js带有 9 个参数的 DrawImage 与动力学 js
【发布时间】：2012-08-30 02:03:34
【问题描述】：

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

提前致谢。

【问题讨论】：

标签： html canvas kineticjs drawimage

【解决方案1】：

使用crop属性。

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>

【讨论】：

非常感谢您拯救了我的一天！