IONIC 4 - Canvas - рисование в неправильном положении касания - PullRequest
Новая
       50

IONIC 4 - Canvas - рисование в неправильном положении касания

0 голосов
/ 10 мая 2019

Я делаю приложение, которому нужно окно, чтобы клиенты присваивали им имена.

Я следовал этому уроку: https://devdactic.com/ionic-canvas-drawing-files/

Мой .html: 

<ion-content padding>
    <ion-grid>
        <div class="w-100">
            <ion-item class="no-border" no-padding>
                <ion-label position="stacked">Assinatura</ion-label>
                    <canvas #imageCanvas (touchstart)="startDrawing($event)" (touchmove)="moved($event)">
                    </canvas>
                </ion-item>
            </div>
        </ion-row>
    </ion-grid>
</ion-content>

Мои .ts: 

import { Component, ViewChild } from '@angular/core';
import { Content, Platform, normalizeURL } from 'ionic-angular';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})

export class HomePage {

    selectedColor = "#000";

    @ViewChild('imageCanvas') canvas: any;
    canvasElement: any;

    saveX: number;
    saveY: number;

    @ViewChild(Content) content: Content;

    constructor(private plt: Platform){

    }

    ionViewDidEnter () {
        this.canvasElement = this.canvas.nativeElement;
    }

    startDrawing(ev) {
        var canvasPosition = this.canvasElement.getBoundingClientRect();
        this.saveX = ev.touches[0].pageX - canvasPosition.x;
        this.saveY = ev.touches[0].pageY - canvasPosition.y
    }

    moved(ev) {
        var canvasPosition = this.canvasElement.getBoundingClientRect();
        let currentX = ev.touches[0].pageX - canvasPosition.x;
        let currentY = ev.touches[0].pageY - canvasPosition.y;

        let ctx = this.canvasElement.getContext("2d");

        ctx.lineJoin = "round";
        ctx.strokeStyle = this.selectedColor;
        ctx.lineWidth = 2;

        ctx.beginPath();
        ctx.moveTo(this.saveX, this.saveY);
        ctx.lineTo(currentX, currentY);
        ctx.closePath();

        ctx.stroke();

        this.saveX = currentX;
        this.saveY = currentY;

    }

}

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

1 Ответ

0 голосов
/ 16 июля 2019

Вы дважды вызываете getBoundingClientRect.

Это решит вашу проблему: 

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Content, Platform, normalizeURL } from 'ionic-angular';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})

export class HomePage {

    selectedColor = "#000";

    @ViewChild('imageCanvas') canvas: ElementRef;
    private ctx: CanvasRenderingContext2D;
    private position: DOMRect;

    saveX: number;
    saveY: number;

    @ViewChild(Content) content: Content;

    constructor(private plt: Platform){

    }

    ionViewDidEnter () {
        this.ctx = this.canvas.nativeElement.getContext('2d');
        this.position = this.canvas.nativeElement.getBoundingClientRect();
    }

    startDrawing(ev) {
        this.saveX = ev.touches[0].pageX - this.position.x;
        this.saveY = ev.touches[0].pageY - this.position.y
    }

    moved(ev) {
        const currentX = ev.touches[0].pageX - this.position.x;
        const currentY = ev.touches[0].pageY - this.position.y;

        this.ctx.lineJoin = "round";
        this.ctx.strokeStyle = this.selectedColor;
        this.ctx.lineWidth = 2;

        this.ctx.beginPath();
        this.ctx.moveTo(this.saveX, this.saveY);
        this.ctx.lineTo(currentX, currentY);
        this.ctx.closePath();

        this.ctx.stroke();

        this.saveX = currentX;
        this.saveY = currentY;
    }
}
...