Question

我一直试图用“画布”制作一个简单的带有离子性的绘画页面。我的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) {
  }


}

似乎它在页面上形成了一个空白窗口（即使我右键单击空白页面的中间，我也可以将其另存为图像），但是我无法绘制任何内容。另外，当我尝试通过按下按钮绘制矩形（例如）时，它可以正常工作。这意味着画布可以正常工作，但是（touchstart）功能永远不会触发！

任何评论或建议都将受到高度赞赏。

Answer 1

我只是想告诉别人，当我在移动设备或Safari而不是chrome上运行代码时，它可以很好地工作。

致谢

画布使页面空白，但不允许我绘制任何东西

1 个答案: