Question

我试图通过使用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);

 }

ant模板是：

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

Answer 1

我认为SVG（矢量图形）不适合用鼠标绘制，因为你必须定义＆＃34;路径＆＃34;作为检查点，还可以处理它是直线还是曲线或贝塞尔曲线等。但您可以执行以下操作：

使用SVGPath元素创建SVG，其d param为空=＆＃34; M＆＃34;
正确检测鼠标位置（执行矩阵反转技巧以确保您可以捕获鼠标在SVG坐标中的位置，您可以在此代码段中看到代码：enter link description here）：

＆＃13;

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

＆＃13;

以mousedown为例＆＃34;添加＆＃34;新的指向路径，在mousemove上移动 - 移动下一个候选点（如果它是一条直线，你决定＆＃34;绘制＆＃34;多边形线）
关于某些其他事件，如pressnhold等 - 发布＆＃34; drawing＆＃34;模式。

但要做具体细节，你需要真正决定你想要绘制什么（比如曲线与线等），因为再次向量需要方向（绘制线条的点）。

否则你最好的解决方案是html canvas位图绘制。

用Angular

1 个答案: