当用户单击这些点时,我想使用动力学绘制具有给定点(x,y)的形状,我将绘制一条连接这些点的线,当用户再次单击第一个点时,我们将通过连接所有点来获得一个形状并用给定的颜色填充它。
这是我的代码,但是在 drawShape 函数中,在我将它添加到我的图层后,多边形形状不会出现,请看一下并给我一些建议以使其工作,谢谢
$(document).ready(function() {
var stage = new Kinetic.Stage({
container : "web",
height : 470,
width : 470
}), imgLayer = new Kinetic.Layer(), imgObj = new Image(), arrPosNode = [], clickedNode = [], animations = {}, pointArr = [];
arrPosNode = ["221 22", "220 130", "220 235", "18 170", "420 170", "99 405", "345 405", "125 202", "320 202", "160 321", "286 320"];
animations = {
normal : [{
x : 0,
y : 0,
height : 400,
width : 410
}],
active : [{
x : 0,
y : 400,
height : 400,
width : 410
}]
}
function addNode(pos, layer, activeColor, num) {
var newPos = pos.split(" ");
//console.log(newPos[0], newPos[1]);
var node = new Kinetic.Circle({
x : newPos[0],
y : newPos[1],
radius : 15,
fill : 'transparent',
id : 'node_' + num
});
node.on('click', function() {
//node.setFill(activeColor);
drawShape(node.getX(), node.getY(), node.getRadius(), layer);
layer.draw();
});
layer.add(node);
}
function saveClickedPoint(x, y, radius) {
for (var n = 0; n < clickedNode.length; n++) {
if (x == clickedNode[n].x && y == clickedNode[n].y) {
return;
}
}
clickedNode.push({
id : ('draw_' + (clickedNode.length + 1)),
x : x,
y : y,
radius : radius
});
}
function getArrFromPoint(obj) {
pointArr = [];
for (var n = 0; n < obj.length; n++) {
pointArr.push(parseInt(obj[n].x));
pointArr.push(parseInt(obj[n].y));
}
return pointArr;
}
function drawShape(x, y, radius, layer) {
saveClickedPoint(x, y, radius);
if (clickedNode.length == 1)
return;
else {
var points = getArrFromPoint(clickedNode);
console.log(points);
var poly = new Kinetic.Polygon({
points : points,
fill : "#d99694",
stroke : "#d99694",
strokeWidth : 5
});
layer.add(poly);
}
}
imgObj.onload = function() {
var bg = new Kinetic.Sprite({
x : 15,
y : 10,
image : imgObj,
height : 400,
width : 410,
animation : 'normal',
animations : animations,
frameRate : 1
});
imgLayer.add(bg);
for (var n = 0; n < arrPosNode.length; n++) {
addNode(arrPosNode[n], imgLayer, 'transparent', n);
/*d99694*/
}
stage.add(imgLayer);
$('.valider').bind('click', function() {
bg.setAnimation('active');
imgLayer.draw();
});
};
imgObj.src = "images/web_sprite.png";
});