Image cropping and masking using fabricjs - fabricjs

Question

How can I remove limiter and edit __editingSetCrop method so that I can correctly mask a image in fabricjs? In my current implementation, dragging is not smooth.
When you try to drag close to the edges, it breaks and stops moving. Instead, it should keep dragging on the available space. When I rotate the image and double click it moves outside of the box. also it not smooth.
here is my example https://www.awesomescreenshot.com/video/14279604?key=ee3022f0335fd9aa82c66628e7085cb3
const drawTopRightIcon = (
ctx,
left,
top,
__styleOverride,
fabricObject
) => {
ctx.save()
ctx.translate(left, top)
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
ctx.beginPath()
ctx.lineCap = 'round'
ctx.lineWidth = 3
ctx.shadowBlur = 2
ctx.shadowColor = 'black'
ctx.moveTo(0, 0)
ctx.lineTo(0.5, 12)
ctx.moveTo(0, 0)
ctx.lineTo(-12, 0)
ctx.strokeStyle = '#ffffff'
ctx.stroke()
ctx.restore()
}
const drawTopLeftIcon = (
ctx,
left,
top,
__styleOverride,
fabricObject
) => {
ctx.save()
ctx.translate(left, top)
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
ctx.beginPath()
ctx.lineCap = 'round'
ctx.lineWidth = 3
ctx.shadowBlur = 2
ctx.shadowColor = 'black'
ctx.moveTo(0, 0)
ctx.lineTo(0.5, 12)
ctx.moveTo(0, 0)
ctx.lineTo(12, 0)
ctx.strokeStyle = '#ffffff'
ctx.stroke()
ctx.restore()
}
const drawBottomLeftIcon = (
ctx,
left,
top,
__styleOverride,
fabricObject
) => {
ctx.save()
ctx.translate(left, top)
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
ctx.beginPath()
ctx.lineCap = 'round'
ctx.lineWidth = 3
ctx.shadowBlur = 2
ctx.shadowColor = 'black'
ctx.moveTo(0, 0)
ctx.lineTo(0, -12)
ctx.moveTo(0, 0)
ctx.lineTo(12, 0)
ctx.strokeStyle = '#ffffff'
ctx.stroke()
ctx.restore()
}
const drawBottomRightIcon = (
ctx,
left,
top,
__styleOverride,
fabricObject
) => {
ctx.save()
ctx.translate(left, top)
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
ctx.beginPath()
ctx.lineCap = 'round'
ctx.lineWidth = 3
ctx.shadowBlur = 2
ctx.shadowColor = 'black'
ctx.moveTo(0, 0)
ctx.lineTo(0, -12)
ctx.moveTo(0, 0)
ctx.lineTo(-12, 0)
ctx.strokeStyle = '#ffffff'
ctx.stroke()
ctx.restore()
}
const drawVerticalLineIcon = (
ctx,
left,
top,
__styleOverride,
fabricObject
) => {
const size = 24
ctx.save()
ctx.translate(left, top)
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
ctx.beginPath()
ctx.lineCap = 'round'
ctx.lineWidth = 3
ctx.shadowBlur = 2
ctx.shadowColor = 'black'
ctx.moveTo(-0.5, -size / 4)
ctx.lineTo(-0.5, -size / 4 + size / 2)
ctx.strokeStyle = '#ffffff'
ctx.stroke()
ctx.restore()
}
const drawHorizontalLineIcon = (
ctx,
left,
top,
__styleOverride,
fabricObject
) => {
const size = 24
ctx.save()
ctx.translate(left, top)
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
ctx.beginPath()
ctx.lineCap = 'round'
ctx.lineWidth = 3
ctx.shadowBlur = 2
ctx.shadowColor = 'black'
ctx.moveTo(-size / 4, -0.5)
ctx.lineTo(-size / 4 + size / 2, -0.5)
ctx.strokeStyle = '#ffffff'
ctx.stroke()
ctx.restore()
}
const controlPositionIcons = {
tl: drawTopLeftIcon,
t: drawHorizontalLineIcon,
tr: drawTopRightIcon,
r: drawVerticalLineIcon,
br: drawBottomRightIcon,
b: drawHorizontalLineIcon,
bl: drawBottomLeftIcon,
l: drawVerticalLineIcon
}
const ControlPositions = {
TOP_LEFT: 'tl',
TOP: 't',
TOP_RIGHT: 'tr',
RIGHT: 'r',
BOTTOM_RIGHT: 'br',
BOTTOM: 'b',
BOTTOM_LEFT: 'bl',
LEFT: 'l'
}
fabric.StaticImage = fabric.util.createClass(fabric.Image, {
type: 'StaticImage',
_editingMode: false,
__editingImage: null,
cornerLengthEditing: 5,
cornerStrokeColorEditing: 'black',
cornerSizeEditing: 2,
cropType: 'rectangle',
initialize: function (element, options) {
options || (options = {});
this.filters = [];
this.cacheKey = 'texture' + fabric.Object.__uid++;
this.registerEditingEvents();
this.callSuper('initialize', options);
this._initElement(element, options);
this.applyCrop();
},
getElement: function () {
return this._element || {};
},
applyCrop: function () {
if (this.clipPath instanceof fabric.Object) {
this.clipPath = null
}
if (this.cropType === 'circle') {
this.clipPath = new fabric.Ellipse({
rx: this.width / 2,
ry: this.height / 2,
left: -this.width / 2,
top: -this.height / 2,
});
}
if (this.cropType === 'triangle') {
this.clipPath = new fabric.Triangle({
width: this.width,
height: this.height,
left: -this.width / 2,
top: -this.height / 2,
});
}
return this
},
registerEditingEvents: function () {
this.on('mousedblclick', () => {
if (!this._editingMode) {
return this.enterEditingMode()
} else {
this.exitEditingMode()
}
})
this.on('deselected', () => {
this.exitEditingMode()
})
},
enterEditingMode: function () {
if (this.selectable && this.canvas) {
this._editingMode = true
this.__editingImage = fabric.util.object.clone(this)
this.__editingImage.clipPath = null
const element = this.__editingImage.getElement()
const { top = 0, left = 0, cropX = 0, cropY = 0, scaleX = 1, scaleY = 1 } = this.__editingImage
this.__editingImage.set({
top: top - cropY * scaleY,
left: left - cropX * scaleX,
height: element.height,
width: element.width,
cropX: 0,
cropY: 0,
opacity: 0.6,
selectable: true,
evented: false,
excludeFromExport: true
})
this.canvas.add(this.__editingImage)
this.controls = this.__editingControls()
this.canvas.requestRenderAll()
this.on('moving', this.__editingOnMoving)
}
},
exitEditingMode: function () {
if (this.selectable && this.canvas) {
this._editingMode = false
if (this.__editingImage) {
this.canvas.remove(this.__editingImage)
this.__editingImage = null
}
this.off('moving', this.__editingOnMoving)
this.controls = fabric.Object.prototype.controls
this.fire('exit:editing', { target: this })
this.canvas.requestRenderAll()
}
},
__editingControls: function () {
const controls = Object.values(ControlPositions)
return controls.map(this.__createEditingControl.bind(this))
},
__createEditingControl: function (position) {
const cursor = position
.replace('t', 's')
.replace('l', 'e')
.replace('b', 'n')
.replace('r', 'w')
return new fabric.Control({
cursorStyle: cursor + '-resize',
actionName: `edit_${this.type}`,
render: controlPositionIcons[position],
positionHandler: this.__editingControlPositionHandler.bind(this, position),
actionHandler: this.__editingActionHandlerWrapper(position)
})
},
__editingActionHandlerWrapper: function (position) {
return (_event, _transform, x, y) => {
//let localPosition = this.getLocalPointer(_event)
this.__editingSetCrop(position, x, y, true)
return true
}
},
__editingOnMoving: function (event) {
if (this._editingMode && event.pointer) {
this.set('dirty', true) // trigger cache refresh
this.__editingSetCrop(ControlPositions.TOP_LEFT, this.left, this.top)
}
},
__editingSetCrop: function (
position,
x,
y,
resize = false
) {
if (this.__editingImage) {
const { top = 0, left = 0, width = 0, height = 0, scaleX = 1, scaleY = 1 } = this.__editingImage
if (position.includes('t')) {
const maxTop = top + height * scaleY - (resize ? 0 : this.getScaledHeight())
const minTop = Math.min(y, maxTop, this.top + this.getScaledHeight())
this.top = Math.max(minTop, top)
const cropY = Math.min((Math.min(Math.max(y, top), this.top) - top) / scaleY, height)
if (resize) {
this.height = Math.max(0, Math.min(this.height + (this.cropY - cropY), height))
}
this.cropY = cropY
} else if (position.includes('b') && resize) {
const minHeight = Math.min((y - top) / scaleY - this.cropY, height - this.cropY)
this.height = Math.max(0, minHeight)
}
if (position.includes('l')) {
const maxLeft = left + width * scaleX - (resize ? 0 : this.getScaledWidth())
const minLeft = Math.min(x, maxLeft, this.left + this.getScaledWidth())
this.left = Math.max(minLeft, left)
const cropX = Math.min((Math.min(Math.max(x, left), this.left) - left) / scaleX, width)
if (resize) {
this.width = Math.max(0, Math.min(this.width + (this.cropX - cropX), width))
}
this.cropX = cropX
} else if (position.includes('r') && resize) {
const minWidth = Math.min((x - left) / scaleX - this.cropX, width - this.cropX)
this.width = Math.max(0, minWidth)
}
this.applyCrop()
}
},
__editingControlPositionHandler: function (position) {
const xMultiplier = position.includes('l') ? -1 : position.length > 1 || position === 'r' ? 1 : 0
const yMultiplier = position.includes('t') ? -1 : position.length > 1 || position === 'b' ? 1 : 0
const x = (this.width / 2) * xMultiplier
const y = (this.height / 2) * yMultiplier
return fabric.util.transformPoint(
new fabric.Point(x, y),
fabric.util.multiplyTransformMatrices(this.canvas.viewportTransform, this.calcTransformMatrix())
)
},
__renderEditingControl: function (
position,
ctx,
left,
top
) {
ctx.save()
ctx.strokeStyle = this.cornerStrokeColorEditing
ctx.lineWidth = this.cornerSizeEditing
ctx.translate(left, top)
if (this.angle) {
ctx.rotate(fabric.util.degreesToRadians(this.angle))
}
ctx.beginPath()
const x = position.includes('l') ? -ctx.lineWidth : position.includes('r') ? ctx.lineWidth : 0
const y = position.includes('t') ? -ctx.lineWidth : position.includes('b') ? ctx.lineWidth : 0
if (position === 'b' || position === 't') {
ctx.moveTo(x - this.cornerLengthEditing / 2, y)
ctx.lineTo(x + this.cornerLengthEditing, y)
} else if (position === 'r' || position === 'l') {
ctx.moveTo(x, y - this.cornerLengthEditing / 2)
ctx.lineTo(x, y + this.cornerLengthEditing)
} else {
if (position.includes('b')) {
ctx.moveTo(x, y - this.cornerLengthEditing)
} else if (position.includes('t')) {
ctx.moveTo(x, y + this.cornerLengthEditing)
}
ctx.lineTo(x, y)
if (position.includes('r')) {
ctx.lineTo(x - this.cornerLengthEditing, y)
} else if (position.includes('l')) {
ctx.lineTo(x + this.cornerLengthEditing, y)
}
}
ctx.stroke()
ctx.restore()
},
});
fabric.StaticImage.fromURL = function (url, callback, imgOptions) {
fabric.util.loadImage(url, function (img, isError) {
callback && callback(new fabric.StaticImage(img, imgOptions), isError);
}, null, imgOptions && imgOptions.crossOrigin);
};
fabric.StaticImage.fromObject = function (options, callback) {
fabric.util.loadImage(
options.src,
function (img) {
return callback && callback(new fabric.StaticImage(img, options))
},
null,
{ crossOrigin: 'anonymous' }
)
}
tried various fabric js libraries