css - hur man flyttar rektangel och tar koordinater som globala för att beskära den valda bilden

Jag är en trainee mjukvaruingenjör och jag arbetar med Angular CLI för min inlärningsprocess. Det är bildbeskärning på canvas. Jag ritar en cirkel när jag klickar på den.

Min fråga är hur man flyttar cirkeln med musknapp nedtryckt och stoppar den när musknappen släpps samt tar (x, y)-koordinaten som global för att ändra den slutliga beskurna bilden.

här är min html...

<div class="row">
    <div class="col-sm-6">
    <canvas #layout1 id="layout1" width="500" height="300" 
        (mousedown)="mouseDown($event)" 
        (mouseup)="mouseUp($event)" 
        (mousemove)="coordinates($event)">
        This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
    </div>
    <div class="col-sm-6">
        <img class="crope-image" src="{{profPic}}" #photo style="width:500px; height:300px;">
    </div>
</div>

här är min typscriptfil...

export class FourComponent implements OnInit {
....some code here...

@ViewChild('layout1') canvas;
@ViewChild('photo') photo;

mouseDown(event: MouseEvent): void {
this.rect.startX = event.pageX - this.offsetLeft;
this.rect.startY = event.pageY - this.offsetTop;
this.drag = true;
const _canvas = this.canvas.nativeElement;
this.event = event;
console.log('kkkk');

this.context.strokeStyle = 'black';
this.context.beginPath();
this.context.arc(this.clientX, this.clientY - 130, 50, 0, 2 * Math.PI);
this.context.stroke();

const _photo = this.photo.nativeElement;
_photo.setAttribute('src', _canvas.toDataURL('image/png'));
this.profPic = _canvas.toDataURL('image/png')

}

mouseUp(event: MouseEvent): void {
this.drag = false;
this.event = event;
}

coordinates(event: MouseEvent): void {
this.clientX = event.clientX;
this.clientY = event.clientY;
this.isMouseDown = event.buttons === 1;
}


ngOnInit() {
const _canvas = this.canvas.nativeElement;
const _photo = this.photo.nativeElement;

this.context = (<HTMLCanvasElement>_canvas).getContext('2d');
this.image = new Image();
this.image.src = '../../assets/images/1.jpg'

this.image.onload = () => {
  this.context.drawImage(this.image, 0, 0, _canvas.width, _canvas.height);
  console.log(this.image.src);
  _photo.setAttribute('src', _canvas.toDataURL('image/png'));
  this.profPic = _canvas.toDataURL('image/png');
 };
 console.log(this.clientX + ',' + this.clientY);
 }
 }

detta är min css-fil...

#layout1{
border:1px solid #d3d3d3;
}
#subcanvas{
border:1px solid #d3d3d3;
}

.crope-image{
border:1px solid #d3d3d3;
}
}

här är min utsikt nu

Tack...

Svar #1

Här är ett exempel på hur man flyttar cirkeln med musknapp ned och stoppar den när musknappen släpps

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
canvas.width = canvas.height = 150
let move = false

canvas.addEventListener('mouseup', e => {
    move = false
})
canvas.addEventListener('mousedown', e => {
    move = true
    draw(e)
})
canvas.addEventListener('mousemove', e => {
    draw(e)
})

function draw(e) {
    if (move) {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      let x = e.clientX - canvas.offsetLeft
      let y = e.clientY - canvas.offsetTop

      ctx.beginPath();
      ctx.arc(x, y, 10, 0, 2 * Math.PI, false);
      ctx.fillText("x=" + x, 10,10);
      ctx.fillText("y=" + y, 10,30);
      ctx.fill();
    }
}
<canvas style="border:1px solid #000000;"></canvas>

Relaterade artiklar