93 lines
2.5 KiB
JavaScript
93 lines
2.5 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
|
|
* @param {canvas}
|
|
*/
|
|
function ApertureHandler(canvas) {
|
|
var _items = {x: [], y: []};
|
|
|
|
function init() {
|
|
var bounds = canvas;
|
|
var xRect = new fabric.Rect({
|
|
width: bounds.width,
|
|
height: bounds.height / 2,
|
|
fill: canvas.backgroundColor,
|
|
opacity: 0.7,
|
|
});
|
|
|
|
var yRect = xRect.clone().set({
|
|
width: bounds.width / 2,
|
|
height: bounds.height
|
|
});
|
|
|
|
_items.x = [].concat([xRect, xRect.clone()]);
|
|
_items.y= [].concat([yRect, yRect.clone()]);
|
|
|
|
[].concat(_items.x, _items.y).forEach(function (o) {
|
|
canvas.add(o);
|
|
});
|
|
canvas.renderAll();
|
|
}
|
|
init();
|
|
|
|
/**
|
|
* Applies configuration to the apertures apertures on the viewport
|
|
* @param {string} axis
|
|
* @param {viewport}
|
|
*/
|
|
this.apply = function (axis, viewport) {
|
|
this.getApertures(axis).forEach(function (o) {
|
|
o.visible = false;
|
|
});
|
|
|
|
var active = this.getApertures(axis === 'x' ? 'y' : 'x');
|
|
|
|
active.forEach(function (o) {
|
|
o.visible = true;
|
|
});
|
|
|
|
active[0].width= active[1].width = canvas.width;
|
|
active[0].height = active[1].height = canvas.height;
|
|
|
|
if (axis === 'y') {
|
|
active[0].top = viewport.top - active[0].height + 0.5;
|
|
active[1].top = viewport.top + viewport.height - 0.5;
|
|
} else {
|
|
active[0].left = viewport.left - active[0].width + 0.5;
|
|
active[1].left = viewport.left + viewport.width - 0.5;
|
|
}
|
|
|
|
this.getApertures().forEach(function (o) {
|
|
o.setCoords();
|
|
});
|
|
|
|
canvas.renderAll();
|
|
};
|
|
|
|
/**
|
|
* Gets the apertures on specified axis. If no axis is provided, both x and y are returned.
|
|
* @param {string} axis
|
|
* @returns {Array}
|
|
*/
|
|
this.getApertures = function (axis) {
|
|
return axis ? _items[axis] : [].concat(_items.x, _items.y);
|
|
};
|
|
|
|
/**
|
|
* Sets transparency of the apertures depending on the crop status
|
|
* @param {boolean} apply
|
|
* @returns {ApertureHandler}
|
|
*/
|
|
this.setTransparent = function (apply) {
|
|
this.getApertures().forEach(function (o) {
|
|
o.opacity = apply ? 0.7 : 1;
|
|
});
|
|
|
|
canvas.renderAll();
|
|
return this;
|
|
};
|
|
}
|
|
|
|
module.exports = ApertureHandler;
|