首先,我有不同形状的图像,我必须重新着色它们,并且只有当鼠标在形状上时才设置命中区域(用于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()我得到我的原始图像(蓝色)仅在形状上有击中区域。
你可以帮帮我吗? 非常感谢你。答案 0 :(得分: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();
}
答案 1 :(得分:1)
我提供了另一种选择:
使用屏幕外画布重新着色您的图像
创建一个Kinetic.Image而不是Kinetic.Shape
设置Image的image属性以引用屏幕外画布
执行dImage.cache
,dImage.drawHitFromCach
&amp; 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>