cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

Shaded area not showing in rounded mode #86

Open mbellezi opened 8 years ago

mbellezi commented 8 years ago

If I use

this.cropperSettings.rounded = true;

in the customized version, the rounded crop mask shows but the supposed shaded area outside the mask is not shaded.

cstefanache commented 8 years ago

this was a feature of <0.6.5 but had to remove it due to browser incompatibility. Have to search for a better solution for nex releases

mbellezi commented 8 years ago

OK. Thank you.

I've develop my own version of an image cropper some time ago and I'm porting it to Angular 2. I don't know how you've implemented the shaded overlay, but here is my code if it is of any use.

 private drawOverlay() {
    let ctx = this.context;
    let bb = this.boundingBox;

    if (this.rounded) {
      let radius = bb.width / 2;
      ctx.beginPath();
      // Whole canvas
      ctx.rect(0, 0, this.width, this.height);
      // Select box (hole)
      ctx.arc(bb.nw.x + radius, bb.nw.y + radius, radius, 0, Math.PI * 2, true);
    } else {
      ctx.beginPath();
      // Whole canvas
      ctx.moveTo(0, 0);
      ctx.lineTo(this.width, 0);
      ctx.lineTo(this.width, this.height);
      ctx.lineTo(0, this.height);
      ctx.lineTo(0, 0);
      ctx.closePath();
      // Select box (square)
      ctx.lineTo(bb.nw.x, bb.nw.y);
      ctx.lineTo(bb.sw.x, bb.sw.y);
      ctx.lineTo(bb.se.x, bb.se.y);
      ctx.lineTo(bb.ne.x, bb.ne.y);
      ctx.lineTo(bb.nw.x, bb.nw.y);
      ctx.closePath();
    }
    ctx.globalAlpha = 0.7;
    ctx.fillStyle = 'black';
    ctx.fill();
    ctx.globalAlpha = 1;
  }

Regards,

Marcos

cstefanache commented 7 years ago

Will be implemented for 0.8 - thanks

andreasrueedlinger commented 7 years ago

Are there any plans to implement this soon? See also #206