在线CAD开发中任意线功能如何写代码？

lihao2014

网页CAD绘制任意线的代码如下（使用了Canvas API）：

HTML部分：

1. <canvas id="myCanvas"></canvas>

复制代码

JavaScript部分：

1. var canvas = document.getElementById("myCanvas");
   
2. 
   
3. var context = canvas.getContext("2d");
   
4. 
   
5. var isDrawing = false;
   
6. 
   
7. var startX, startY;
   
8. 
   
9. 
   
10. 
    
11. // 监听鼠标按下事件
    
12. 
    
13. canvas.addEventListener("mousedown", function(e) {
    
14. 
    
15.     startX = e.clientX - canvas.offsetLeft;
    
16. 
    
17.     startY = e.clientY - canvas.offsetTop;
    
18. 
    
19.     isDrawing = true;
    
20. 
    
21. });
    
22. 
    
23. 
    
24. 
    
25. // 监听鼠标移动事件
    
26. 
    
27. canvas.addEventListener("mousemove", function(e) {
    
28. 
    
29.     if (!isDrawing) {
    
30. 
    
31.         return;
    
32. 
    
33.     }
    
34. 
    
35.     var x = e.clientX - canvas.offsetLeft;
    
36. 
    
37.     var y = e.clientY - canvas.offsetTop;
    
38. 
    
39.     context.beginPath();
    
40. 
    
41.     context.moveTo(startX, startY);
    
42. 
    
43.     context.lineTo(x, y);
    
44. 
    
45.     context.stroke();
    
46. 
    
47.     startX = x;
    
48. 
    
49.     startY = y;
    
50. 
    
51. });
    
52. 
    
53. 
    
54. 
    
55. // 监听鼠标松开事件
    
56. 
    
57. canvas.addEventListener("mouseup", function(e) {
    
58. 
    
59.     isDrawing = false;
    
60. 
    
61. });

复制代码

通过监听鼠标的按下、移动和松开事件，在画布上实现了任意线的绘制功能，在线CAD有很多功能，需要更多咨询可以关注梦想CAD控件。

zxz2004

学习学习，谢谢分享

llzhao

zhangningbo

楼主太厉害了！楼主，I*老*虎*U！我觉得马后炮化工真是个好地方！