Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 229599

How to perform undo task in canvas draw component (typescript)

$
0
0

Thanks @Matte for solution can you please check my code
canvas-draw.ts file
import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { AlertController} from ‘ionic-angular’;

@Component({
selector: ‘canvas-draw’,
templateUrl: ‘canvas-draw.html’
})
export class CanvasDraw {
// touchstartListener = (ev) => this.handleStart((ev));
// touchmoveListener = (ev) => this.handleMove((ev));

@ViewChild('myCanvas') canvas: any ;

CANVAS_width= 500;
CANVAS_height= 700;
canvasElement: any;
lastX: number;
lastY: number;
public photos : any;
base64Image:any;

currentColour: string = '#1abc9c';
availableColours: any;

brushSize: number = 10;

constructor(public platform: Platform, public renderer: Renderer,private camera : Camera,public navCtrl: NavController, public navParams: NavParams,private alertCtrl: AlertController) {
    console.log('Hello CanvasDraw Component');

    this.availableColours = [
        '#1abc9c',
        '#3498db',
        '#9b59b6',
        '#e67e22',
        '#e74c3c'
    ];

}


ngAfterViewInit(){

    this.canvasElement = this.canvas.nativeElement;

    this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
    this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');

}
ngOnInit() {
    this.photos = [];
  }

changeColour(colour){
    this.currentColour = colour;
}

changeSize(size){
    this.brushSize = size;
}

handleStart(ev){

    this.lastX = ev.touches[0].pageX;
    this.lastY = ev.touches[0].pageY;
}

handleMove(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.lastX, this.lastY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();
    ctx.strokeStyle = this.currentColour;
    ctx.lineWidth = this.brushSize;
    ctx.stroke();      

    this.lastX = currentX;
    this.lastY = currentY;

}

clearCanvas(){
    let ctx = this.canvasElement.getContext('2d');
    ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height); 
    this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));
    this.canvasElement.addEventListener('touchmove', ev => this.handleMove(ev));  
}



takePhoto() 
{

  
  var image = new Image();

  let ctx = this.canvasElement.getContext('2d');
 
  const options : CameraOptions = 
  {
    quality: 50, // picture quality
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  this.camera.getPicture(options).then((imageData) => 
  {
        

      this.base64Image = "data:image/jpeg;base64," + imageData;
    


    

      image.src=this.base64Image;
      

    

    
          ctx.drawImage(image, 0, 0, image.width,image.height,     // source rectangle
            0, 0,  this.CANVAS_width, this.CANVAS_height);

          this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));

this.canvasElement.addEventListener(‘touchmove’, ev => this.handleMove(ev));

    }, (err) => {
      console.log(err);
    });


}

}


Viewing all articles
Browse latest Browse all 229599

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>