Kinetic.js 获得颜色变化的形状命中区域答案

【问题标题】：Kinetic.js get shape hit region with color changeKinetic.js 获得颜色变化的形状命中区域
【发布时间】：2014-07-22 18:14:01
【问题描述】：

首先，我有不同形状的图像，我必须为它们重新着色，并且仅当鼠标在形状上时才设置点击区域（用于 onclick 事件）。所以在分别调查问题后，我找到了两种解决方案，但我不知道如何一起使用。

-仅使用形状命中区域，我使用 .cache() 将图像存储在缓存中并在没有透明像素的情况下重绘它。

-为了改变颜色，我迭代 imageData 像素，在 for 循环中一一改变它们。

为了测试，我使用的是原始蓝色图像（.png 格式），我想要正确设置命中区域的红色图像，我也在使用 kinetic-v5.0.2。

这是我的代码。

    function makeKineticImage(imageObj){


    var dImage = new Kinetic.Shape({
        sceneFunc: function (context) {
            context.beginPath();
            console.log("sceneFunc");
            var x = 100;
            var y = 100;
            context.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
            var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
            var data = imageData.data;

                            //Here i'm changing the color
            for (var i = 0; i < data.length; i += 4) {
                //var brightness = 0.9 * data[i] + 0 * data[i + 1] + 0 * data[i + 2];
                data[i] = 255;
                data[i + 1] = 25;
                data[i + 2] = 25;
            }
            context.putImageData(imageData, x, y);
            context.rect(x, y, imageObj.width, imageObj.height);
            context.closePath();
            context.fillStrokeShape(this);
        }
    });

    dImage.on("click", function() {
      console.log("Click dImage");
    }); 

    layer.add(dImage);

    /*dImage.cache({
        width: 79,
        height: 73,
        x: 100,
        y: 100
    });

    dImage.drawHitFromCache();*/

    layer.draw();
    layer.drawHit();
}

现在我用其他颜色（红色）填充我的形状，但点击区域不适合形状（获取所有图像正方形），但如果我取消注释 .cache() 和 .drawHitFromCache() 我得到我的原始图像（蓝色）仅在形状上具有命中区域。

你能帮帮我吗？非常感谢。

【问题讨论】：

标签： javascript image canvas kineticjs shape

【解决方案1】：

我提供一个替代方案：

使用屏幕外画布重新着色您的图像
创建 Kinetic.Image 而不是 Kinetic.Shape
设置图像的图像属性以引用离屏画布
执行dImage.cache、dImage.drawHitFromCach & drawHit 来创建自定义命中区域

这是示例代码和演示：http://jsfiddle.net/m1erickson/kv5Lg/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var canvas=document.createElement("canvas");

    var imageObj=new Image();
    imageObj.crossOrigin="anonymous";
    imageObj.onload=start;
    imageObj.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png";
    function start(){

        canvas.width=imageObj.width;
        canvas.height=imageObj.height;
        var ctx=canvas.getContext("2d");

        ctx.drawImage(imageObj,0,0);
        var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
        var data = imageData.data;
        for (var i = 0; i < data.length; i += 4) {
            data[i] = 255;
            data[i + 1] = 25;
            data[i + 2] = 25;
        }
        ctx.putImageData(imageData,0,0);

        var dImage=new Kinetic.Image({
            x:100,
            y:100,
            image:canvas,
        });
        dImage.on("click", function() {
          console.log("Click dImage");
        }); 
        layer.add(dImage);
        layer.draw();

        dImage.cache();
        dImage.drawHitFromCache();
        layer.drawHit();

    }


}); // end $(function(){});

</script>       
</head>
<body>
    <div id="container"></div>
</body>
</html>

【讨论】：

【解决方案2】：

试试这个！！！

代码的相关部分是：

dataURL = context.getCanvas().toDataURL("image/png");

var imageObj = new Image(); imageObj.src = dataURL;

function makeKineticImage(imageObj){
        var dataURL;
        var dImage = new Kinetic.Shape({
            sceneFunc: function (context) {
                context.beginPath();
                console.log("sceneFunc");
                var x = 100;
                var y = 100;
                context.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
                var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
                var data = imageData.data;
                for (var i = 0; i < data.length; i += 4) {
                    //var brightness = 0.9 * data[i] + 0 * data[i + 1] + 0 * data[i + 2];
                    data[i] = 255;
                    data[i + 1] = 25;
                    data[i + 2] = 25;
                }
                context.putImageData(imageData, x, y);
                context.rect(x, y, imageObj.width, imageObj.height);
                context.closePath();
                context.fillStrokeShape(this);
                dataURL = context.getCanvas().toDataURL("image/png");
                console.log(dataURL);

            },
            hitFunc: function(context) {
                console.log("hitFunc");
                context.beginPath();
                var x = 100;
                var y = 100;
                context.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
                var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
                var data = imageData.data;
                for (var i = 0; i < data.length; i += 4) {
                    //var brightness = 0.9 * data[i] + 0 * data[i + 1] + 0 * data[i + 2];
                    data[i] = 255;
                    data[i + 1] = 25;
                    data[i + 2] = 25;
                }
                context.putImageData(imageData, x, y);
                context.rect(x, y, imageObj.width, imageObj.height);
                context.closePath();
                context.fillStrokeShape(this);
            }
        });

        layer.add(dImage);
        layer.draw();
        layer.removeChildren();
        var imageObj = new Image();
        imageObj.src = dataURL;
        var kImage = new Kinetic.Image({
            image: imageObj,
            //x: 100,
            //y: 100,
        });

        kImage.on("click", function() {
            console.log("Click dImage");
        });

        layer.add(kImage);
        kImage.cache();
        kImage.drawHitFromCache();
        layer.draw();
        layer.drawHit();
    }

【讨论】：