[英]Fabric.js: selection box after cropping image
fabricjs中实际上没有cropTo方法。
有一个clipTo方法的行为与您描述的一样。
裁剪还不是基本的fabricjs功能。 2.0发行版可能会使其变得更容易,但是目前唯一的获取方法是将render方法子类化并完全由您自己完成。
为了建立AndreaBogazzi的答案,这是我完整的解决方案,其中我覆盖了_render方法。 每当创建图像时,都会向其添加“ sizeMode”属性,该属性告诉_render如何精确绘制图像:
fabric.Image.prototype._render = function(ctx, noTransform) {
/* This is the default behavior. I haven't modified anything in this part. */
let x, y, imageMargins = this._findMargins(), elementToDraw;
x = (noTransform ? this.left : -this.width / 2);
y = (noTransform ? this.top : -this.height / 2);
if (this.meetOrSlice === 'slice') {
ctx.beginPath();
ctx.rect(x, y, this.width, this.height);
ctx.clip();
}
if (this.isMoving === false && this.resizeFilters.length && this._needsResize()) {
this._lastScaleX = this.scaleX;
this._lastScaleY = this.scaleY;
elementToDraw = this.applyFilters(null, this.resizeFilters, this._filteredEl
|| this._originalElement, true);
}
else {
elementToDraw = this._element;
}
/* My changes begin here. */
if (elementToDraw && elementToDraw.naturalHeight > 0) {
if (this.sizeMode === BadgingImageSizeMode.CenterImage) {
drawCenterImage.apply(this, [ctx, elementToDraw, imageMargins, x, y]);
} else {
// Default _render behavior
ctx.drawImage(elementToDraw,
x + imageMargins.marginX,
y + imageMargins.marginY,
imageMargins.width,
imageMargins.height);
}
}
/* And they finish here. */
this._stroke(ctx);
this._renderStroke(ctx);
};
我定义的drawCenterImage函数在这里:
const drawCenterImage = function(ctx, elementToDraw, imageMargins, x, y) {
const sx = (elementToDraw.naturalWidth - this.width) / 2;
const sy = (elementToDraw.naturalHeight - this.height) / 2;
ctx.drawImage(elementToDraw,
sx,
sy,
imageMargins.width,
imageMargins.height,
x + imageMargins.marginX,
y + imageMargins.marginY,
imageMargins.width,
imageMargins.height);
};
虽然这可以使图像居中(这是我最初的问题),但对ctx.drawImage的不同调用将导致不同的效果。 这是drawImage方法的文档 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.