2012-10-07 7 views
0

키네틱 그리기는 사용자가이 점을 클릭 할 때 주어진 점 (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"; 

}를 살펴보고 나에게 그것이 작동하는지 확인하기 위해 몇 가지 제안을주지하시기 바랍니다); 사용

답변