2012-07-19 51 views
1

我一直在使用下面的教程,以允许用户在绘制的图像绘制的位置:HTML画布 - 检索用户

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple

只是简单的演示已经足以让用户做我想做的事。

我的下一个任务是获取用户绘制区域的坐标并将它们存储在数据库中。该应用程序适用于物理治疗师。这个想法是,用户在他们受伤的身体上画画,然后理疗师可以在稍后的日期将图像与绘制的图像合并。

2个问题真:

  1. 如何检索绘制在屏幕的面积有多大?
  2. 从数据库中检索时,如何将图形重新绘制到图像上?

回答

0

在教程中,您有两个数组 - clickX,clickY。在mouseleave和mouseup后保存来自这些数组的点。这将是该地区。 要绘制形状序列化的所有领域,使他们将可在客户端上,绘制的所有领域,从拉法的代码一样

for(var i=0; i < clickX.length; i++) 
    {  
    context.beginPath(); 
    if(clickDrag[i] && i){ 
     context.moveTo(clickX[i-1], clickY[i-1]); 
    }else{ 
     context.moveTo(clickX[i]-1, clickY[i]); 
    } 
    context.lineTo(clickX[i], clickY[i]); 
    context.closePath(); 
    context.stroke(); 
    } 

我才明白,你是否正确?