Question

我一直在使用以下教程来允许用户绘制图像：

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

只需简单的演示即可让用户做我想做的事。

我的下一个任务是获取用户绘制的区域的坐标并将它们存储在数据库中。该申请是为物理治疗师。这个想法是用户在他们受伤的身体上画画，然后理疗师可以在晚些时候将图像与绘制的图像对齐。

真的有两个问题：

如何检索绘制的屏幕区域？
从数据库中检索时，如何将形状重新绘制到图像上？

Answer 1

在本教程中，您有两个数组 - 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();
  }

我理解你的意见吗？

HTML Canvas - 检索用户绘制的位置

1 个答案: