在 Angular 中使用 mousemove 绘制 svg 路径

【问题标题】：Draw svg path with mousemove in Angular在 Angular 中使用 mousemove 绘制 svg 路径
【发布时间】：2017-12-26 16:34:10
【问题描述】：

我试图通过使用 Angular 移动鼠标来绘制 svg 路径，但我无法做到这一点，想法是通过跟随鼠标来绘制路径。我如何在 Angular 中实现这一点？我无法定位我的 svg 元素以开始绘制路径。下面是我的组件代码，

ngOnInit() {
   this.svgPath = this.dataContainer.nativeElement;
};


handleMove(ev){
  svgPath =  createSvgElement("path");
  svgPath.setAttribute("fill", "none");
  svgPath.setAttribute("shape-rendering", "geometricPrecision");
  svgPath.setAttribute("stroke-linejoin", "round");
  svgPath.setAttribute("stroke", "#000000");
  svgPath.setAttribute("d", "M" + ev.clientX  + "," + ev.clientY);

 }

模板是：

<ion-content no-bounce>
  <div id="dataContainer" #dataContainer></div>
</ion-content>

【问题讨论】：

标签： angular svg mouseevent

【解决方案1】：

我认为 SVG（矢量图形）不是最适合跟随鼠标绘制的，因为您必须将“路径”定义为检查点，并且还要处理它是直线、曲线还是贝塞尔曲线等。但是您可能可以执行以下操作：

使用 SVGPath 元素创建 SVG，其 d 参数为空 = "M"
正确检测鼠标位置（执行矩阵求逆技巧以确保您可以捕获鼠标在 SVG 坐标中的位置，您可以在此 sn-p 中查看代码：enter link description here）：

mouse.x = event.clientX;
mouse.y = event.clientY;
mouse = mouse.matrixTransform(mainSVG.getScreenCTM().inverse());

例如在 mousedown 上“添加”新点到路径中，在 mousemove 上 - 移动下一个候选点（如果它是一条直线并且您决定“绘制”折线）
在某些其他事件（例如 pressnhold 等）上 - 释放“绘图”模式。

但要做到具体，您需要真正决定要绘制的确切内容（例如曲线与直线等），因为矢量需要方向（绘制线的点）。

否则，您最好的解决方案是 html 画布位图绘图。

【讨论】：