2014-03-06 29 views
0

我試圖模擬塗料中的多邊形工具,以允許用戶在我的畫布上繪製相同的工具。 下面是我已編碼到目前爲止,但一些如何它不完全相同的繪畫工具。 另外我想知道是否有任何方法來填補這個形狀一旦繪製。 任何人都可以請幫忙。在HTML5畫布上實現多邊形工具

var startPointX = "", startPointY = "", endpointX, endpointY, isnewShape = false; 
function tool_polygon() { 
var tool = this; 
this.started = false; 

this.mousedown = function (ev) { 
    tool.started = true; 
    tool.x0 = ev.offsetX; 
    tool.y0 = ev.offsetY; 


    console.log('mousedown'); 
    if (startPointX == "" && startPointY == "") { 
     startPointX = tool.x0; 
     startPointY = tool.y0; 
    } 
    console.log('startPointX ' + startPointX + ' startPointY ' + startPointY + ' ev.offsetX ' + ev.offsetX + ' ev.offsetY ' + ev.offsetY + ' isnewShape ' + isnewShape); 
    //if ((Math.abs(startPointX - ev.offsetX) < 5) && (Math.abs(startPointY - ev.offsetY) < 5) && (startPointX != ev.offsetX && startPointY != ev.offsetY) && !isnewShape) { 

    //keeping average gap of 5 pixels as the canvas is smaller and can't get exact start point 
    if ((Math.abs(startPointX - ev.offsetX) < 5) && (Math.abs(startPointY - ev.offsetY) < 5) && isnewShape) { 
     alert('point matched'); 

     isnewShape = false ; 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath(); 
     context.moveTo(endpointX, endpointY); 
     //context.moveTo(ev.offsetX, ev.offsetY); 
     context.lineTo(startPointX, startPointY); 
     startPointX = ""; 
     startPointY = ""; 
     endpointX = ""; 
     endpointY = ""; 
     context.strokeStyle = strokeColor; 
     context.stroke(); 
     context.closePath(); 
     img_update(); 
     tool.started = false; 
    } 
    else { 
     if (startPointX == "" || startPointY == "" || endpointX == "" || endpointY == "") 
      return; 

     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath(); 
     context.moveTo(endpointX, endpointY); 
     isnewShape = false; 
     context.lineTo(ev.offsetX, ev.offsetY); 
     endpointX = ev.offsetX; 
     endpointY = ev.offsetY; 
     context.strokeStyle = strokeColor; 
     context.stroke(); 
     context.closePath(); 
     img_update(); 
    } 


}; 

this.mousemove = function (ev) { 
    if (!tool.started) { 
     return; 
    } 
    console.log('mousemove'); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(startPointX, startPointY); 
    context.lineTo(ev.offsetX, ev.offsetY); 
    endpointX = ev.offsetX; 
    endpointY = ev.offsetY; 
    context.strokeStyle = strokeColor; 
    context.stroke(); 
    context.closePath(); 
}; 

this.mouseup = function (ev) { 
    if (tool.started) { 
     console.log('mouseup'); 
     isnewShape = true; 
     tool.started = false; 
     img_update(); 
    } 
}; 

}

回答

0

帆布基本上是一個位圖圖像。無論你在畫布上繪製什麼,都以像素形式存儲,而不是形狀。所以一旦畫出來,你就不能回去填充形狀。你可以做的就是將形狀創建爲具有屬性的對象,例如填充顏色和重繪形狀的步驟。然後,當您希望更改屬性時,請在對象內部進行更改,然後重新繪製畫布。

我已經構建了一個項目,其中包括可以重新着色的多邊形。

我的項目http://canvimation.github.com/可能有助於做你想做的。

幫助文件在https://sites.google.com/site/canvimationhelp/

爲我的項目的源代碼是在https://github.com/canvimation/canvimation.github.com

請隨時叉子或複製代碼,你應該想這樣做。