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/

Canvas Kinetic绘图形状，触摸和点击事件

1 个答案: