Search code examples
ionic-frameworkimage-processingdrawingionic4

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

I'm creating a new app in ionic for a hobby and I'm getting big dudes. I want to create a page to draw points over an image and save this points into an array of coordinates.

For example:

enter image description here Upload an image

enter image description here Set the position of the dots in relation to the image as array for example: ["75,85", "82,35", "76,15", "70,35", "22,07"]

enter image description here Draw line between point posisiton

The dude is how to draw dots over the image and store their position in an array like ["75,85", "82,35", "76,15", "70,35", "22,07"].

Can I use any library for this?

Is simple or difficult task?

Solution

  • I would be looking into using the <canvas> tag if I was trying to build this from scratch.

    The first task is to figure out out how to draw lines to your satisfaction. For example, there is a built in lineTo() function as part of the 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();

    I just grabbed this from this site.

    To do this the Ionic way though you would need to get the native element using perhaps this tutorial.

    That tutorial shows how to do both getting the canvas in Ionic and drawing lines.

    Add a canvas tag like this:

    <canvas #imageCanvas></canvas>

    Get it from the code by using a viewchild like this:

    @ViewChild('imageCanvas') canvas: any;

    And then read its nativeElement like this:

    this.canvasElement = this.canvas.nativeElement;

    After that you can use the lineTo code from above. In fact, if you read that tutorial it uses the same technique to draw lots of little lines to look like a mouse drawing mode.

    And if you position the image using css absolute positioning above the canvas it will work as a background image, I think by default, but I'm pretty sure you can make the canvas bg transparent.