帆布带触摸和点击事件的动力学绘图形状

Question

我想用动力学绘制一个具有给定点（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"; 

} ）;

Answer 1

尝试使用：

stage.getContainer().addEventListener('mousedown', function(evt) {}); 

，然后定义您的绘图功能。

也试试这个：http://jsfiddle.net/robtown/SGQq7/22/