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

Question

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

例如：

上传图片

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

在点posisiton

之间画线

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

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

任务简单还是困难？

Answer 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 和绘制线条。

像这样添加 canvas 标签：

<canvas #imageCanvas></canvas>

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

@ViewChild('imageCanvas') canvas: any;

然后像这样读取它的 nativeElement：

this.canvasElement = this.canvas.nativeElement;

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

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

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

How to draw lines between points and save as array of coordinates IONIC

drawing

image-processing

ionic-framework

ionic4