如何在点之间画线并保存为坐标数组 IONIC答案

【问题标题】：How to draw lines between points and save as array of coordinates IONIC如何在点之间画线并保存为坐标数组 IONIC
【发布时间】：2020-02-01 17:55:32
【问题描述】：

我正在用 ionic 创建一个新的应用程序来满足我的爱好，而且我越来越喜欢大家伙了。我想创建一个页面来在图像上绘制点并将这些点保存到坐标数组中。

例如：

上传图片

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

在点位置之间画线

老兄是如何在图像上绘制点并将它们的位置存储在数组中，例如 ["75,85", "82,35", "76,15", "70,35", "22,07 "]。

我可以为此使用任何库吗？

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

【问题讨论】：

标签： ionic-framework image-processing drawing ionic4

【解决方案1】：

如果我想从头开始构建它，我会考虑使用<canvas> 标签。

首要任务是弄清楚如何画出令您满意的线条。例如，有一个内置的 lineTo() 函数作为 canvas 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();

我刚从this site 那里得到这个。

要使用 Ionic 方式执行此操作，您需要使用 perhaps this tutorial 获取本机元素。

该教程展示了如何在 Ionic 中获取画布和绘制线条。

像这样添加一个画布标签：

<canvas #imageCanvas></canvas>

使用这样的 viewchild 从代码中获取它：

@ViewChild('imageCanvas') canvas: any;

然后像这样读取它的nativeElement：

this.canvasElement = this.canvas.nativeElement;

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

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

【讨论】：

感谢@rtpHarry 的帮助，我将阅读更多有关离子画布的信息并尝试开发它。