Canvas создает пустую страницу, но не позволяет мне рисовать - PullRequest
Новая
       17

Canvas создает пустую страницу, но не позволяет мне рисовать

0 голосов
/ 20 июня 2019

Я пытался сделать простую страницу для рисования в ионном виде с помощью «холста».Мой page.html похож на ниже, как я видел в некоторых видео, они написали свой код так: 

<ion-header>
  <ion-toolbar>
    <ion-title>Drawing</ion-title>
  </ion-toolbar>
</ion-header>



<ion-content padding no-bounce>

<ion-toolbar id="top"></ion-toolbar>
   <canvas #imageCanvas (touchstart)="startDrawing($event)" (touchmove)="moved($event)" (touchend)="EndDrawing($event)"></canvas>
<ion-toolbar id="bottom"></ion-toolbar>

</ion-content>

, а код page.ts так: 

import { Component, OnInit, ViewChild , Renderer, ElementRef} from '@angular/core';
import { NavController,  normalizeURL, Content  } from 'ionic-angular';
import {Platform} from '@ionic/angular'
import { File, IWriteOptions } from '@ionic-native/file/ngx';

import { IonicStorageModule } from '@ionic/storage';
import { Storage } from '@ionic/storage';
const STORAGE_KEY = 'IMAGE_LIST';


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

export class LabellingPage implements OnInit {
  @ViewChild('imageCanvas') canvas: any;
  @ViewChild(Content) content: Content;
  @ViewChild('fixedContainer') fixedContainer: any;


  canvasElement: any;
  saveX: number;
  saveY: number;
  storedImages = [];
  selectedColor = '#9e2956';
  colors = [ '#9e2956', '#c2281d', '#de722f', '#edbf4c', '#5db37e', '#459cde', '#4250ad', '#802fa3' ];


  constructor(private storage: Storage, private plt: Platform , public renderer:Renderer) {
   }




  ionViewDidEnter(){
    this.canvasElement =  this.canvas.nativeElement;
    this.renderer.setElementAttribute(this.canvasElement, 'width' , this.plt.width()+'');
    this.renderer.setElementAttribute(this.canvasElement, 'height' , this.plt.height()+'');

  }

  ngOnInit() {
  }

  selectColor(color) {
    this.selectedColor = color;
  }

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

  moved(ev) {

    let ctx = this.canvasElement.getContext('2d');
    let currentX = ev.touches[0].pageX ;
    let currentY = ev.touches[0].pageY ;
    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(this.saveX , this.saveY);
    ctx.lineTo(currentX , currentY);
    ctx.closePath();
    ctx.strokeStyle= this.selectedColor;
    ctx.lineWidth = 10;
    ctx.strock();

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

  endDrawing(ev) {
  }


}

Кажется, на моей странице появляется пустое окно (даже когда я щелкаю правой кнопкой мыши в середине пустой страницы, я могу сохранить его как изображение), но я не могу ничего рисовать.Кроме того, когда я пытаюсь нарисовать прямоугольник (например) нажатием кнопки, он работает нормально.Это означает, что холст работает нормально, но функция (запуск прикосновения) никогда не срабатывает!

Любой комментарий или предложение высоко ценится.

1 Ответ

0 голосов
/ 22 июня 2019

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

Привет

...