Как нарисовать линии между точками и сохранить как массив координат IONIC - PullRequest
Новая
       23

Как нарисовать линии между точками и сохранить как массив координат IONIC

0 голосов
/ 03 октября 2019

Я создаю новое приложение на ионическом языке для хобби и получаю больших парней. Я хочу создать страницу для рисования точек на изображении и сохранить эти точки в массиве координат.

Например:

enter image description here Загрузить изображение

enter image description here Установите положение точек по отношению к изображению в виде массива, например: ["75,85", "82,35", "76,15", "70,35 "," 22,07 "]

enter image description here Нарисуйте линию между точками положения

Чувак, как нарисовать точки на изображении и сохранить ихпозиция в массиве, например ["75,85", "82,35", "76,15", "70,35", "22,07"].

Могу ли я использовать любую библиотеку для этого?

Это простая или сложная задача?

1 Ответ

1 голос
/ 03 октября 2019

Я бы хотел использовать тег <canvas>, если бы пытался создать его с нуля.

Первая задача - выяснить, как провести линию к вашему удовольствию. Например, есть встроенная функция 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();

Я только что получил это с с этого сайта .

Чтобы сделатьэто ионный способ, хотя вам нужно будет получить нативный элемент, используя , возможно, этот урок .

В этом уроке показано, как сделать получение холста в Ionic и рисование линий.

Добавьте тег canvas следующим образом: 

<canvas #imageCanvas></canvas>

Получите его из кода с помощью вида viewchild: 

@ViewChild('imageCanvas') canvas: any;

И затем прочитайте его nativeElement, как этот: 

this.canvasElement = this.canvas.nativeElement;

После этого вы можете использовать код lineTo сверху. Фактически, если вы прочитаете этот учебник, он использует ту же технику для рисования множества маленьких линий, чтобы они выглядели как режим рисования мышью.

И если вы поместите изображение, используя абсолютное позиционирование css над холстом, оно будет работать какфоновое изображение, я думаю по умолчанию, но я уверен, что вы можете сделать холст bg прозрачным.

...