css - 如何移动矩形并将坐标作为全局来裁剪所选图像

Question

我是一名见习软件工程师，我正在为我的学习过程使用 Angular CLI。它是 Canvas 上的图像裁剪内容。单击它时我会画一个圆圈。

我的问题是如何使用 mousedown 移动圆圈并在鼠标松开时停止它并将 (x ,y) 坐标设为全局坐标以更改最终裁剪图像。

这是我的 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>

这是我的 typescript 文件...

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);
 }
 }

这是我的CSS文件...

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

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

这是我现在的看法

谢谢你...

Answer 1

这里是一个例子，说明如何用鼠标向下移动圆圈并在鼠标向上移动时停止圆圈

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>