[英]Kinetic.js get shape hit region with color change
首先,我有不同形狀的圖像,我必須重新着色它們,並且只有當鼠標在形狀上時才設置命中區域(對於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()我得到我的原始圖像(藍色)與命中區域只在形狀上。
你可以幫幫我嗎? 非常感謝你。
試試這個!!!
代碼的相關部分是:
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();
}
我提供另一種選擇:
使用屏幕外畫布重新着色您的圖像
創建一個Kinetic.Image而不是Kinetic.Shape
設置Image的image屬性以引用屏幕外畫布
執行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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.