Ionic framework 如何在点之间绘制直线并另存为坐标数组

我在爱奥尼亚创建了一个新的应用程序，作为一种爱好，我得到了一些大家伙。 我想创建一个页面，在图像上绘制点，并将这些点保存到坐标数组中

例如：

上传图像

将点相对于图像的位置设置为数组，例如：[“75,85”、“82,35”、“76,15”、“70,35”、“22,07”]

在点位置之间画一条线

花花公子是如何在图像上画点，并将它们的位置存储在像[“75,85”，“82,35”，“76,15”，“70,35”，“22,07”]这样的数组中

我可以用图书馆来做这个吗

---

是简单的任务还是困难的任务？

如果我想从头开始构建，我会考虑使用

标记

第一项任务是找出如何画出令你满意的界线。例如，有一个内置的

lineTo（）

函数作为画布api的一部分：

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.lineWidth = 5;
ctx.stroke();

我刚从他那里抓到这个

不过，要以离子方式实现这一点，您需要使用

该教程演示了如何在爱奥尼亚和绘制线中获取画布

添加画布标记，如下所示：

<canvas #imageCanvas></canvas>

@ViewChild('imageCanvas') canvas: any;

this.canvasElement = this.canvas.nativeElement;

然后像这样读它的nativeElement：

<canvas #imageCanvas></canvas>

@ViewChild('imageCanvas') canvas: any;

this.canvasElement = this.canvas.nativeElement;

之后，您可以使用上面的

lineTo

代码。事实上，如果您阅读了该教程，它将使用相同的技术绘制许多小线条，看起来像鼠标绘制模式

---

如果您使用css绝对定位将图像定位在画布上方，它将作为背景图像工作，我认为默认情况下，但我非常确定您可以使画布bg透明。

Than you@rtpHarry为了您的帮助，我将阅读更多关于爱奥尼亚画布的信息，并尝试开发它。