photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PW-1468 - Fix cropping for canvas with image on edge

Browse Source
This commit is contained in:
Anders Gustafsson
2018-09-26 13:49:45 +02:00
parent 022825195a
commit 8ed0030927
4 changed files with 64 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/image-editor.js
Vendored
+32 -9
View File
@@ -703,7 +703,8 @@ var DragHandle = function (handler) {
};
this.init = function () {
var viewport = this.getCanvas().getViewport();
var canvas = this.getCanvas();
var viewport = canvas.getViewport();
var viewportData = viewport.getData();
var frameHandler = viewport.getFrameHandler();
var tracks = handler.getTracks();
@@ -713,15 +714,27 @@ var DragHandle = function (handler) {
this.getCanvas().remove(this.__handles.y);
}
var frameWidth = frameHandler.getFrameSize();
var frameWidth = frameHandler.getFrameSize(); // Rendered frameWidth, in pixels.
var realFrameWidth = canvas.__canvasFrameSize; // Real frame size, in cm.
var frameType = frameHandler.getFrameType();
var handleWidth = frameType == 'image' ? viewportData.width - frameWidth * 2 : viewportData.width;
var handleHeight = frameType == 'image' ? viewportData.height - frameWidth * 2 : viewportData.height;
var handleWidth = viewportData.width;
var handleHeight = viewportData.height;
var widthToDisplay = viewportData.dim.width;
var heightToDisplay = viewportData.dim.height;
var unit = viewportData.dim.units;
if (frameType == 'image') {
var doubleRealFrameWidth = realFrameWidth * 2;
handleWidth -= frameWidth * 2;
handleHeight -= frameWidth * 2;
widthToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
heightToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
}
this.__handles = {
x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, handleWidth),
y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight)
x: getRect(widthToDisplay + ' ' + unit, handleWidth),
y: getRect(heightToDisplay + ' ' + unit, handleHeight)
};
this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
@@ -1272,6 +1285,7 @@ function ImageEditor(canvasId, args) {
type: 'wallpaper',
// canvasFrameType defaults to image on frame
canvasFrameType: 'image',
canvasFrameSize: 2.9,
// Default texts on the buttons
texts: {
showThreeD: '3d',
@@ -1315,7 +1329,8 @@ function ImageEditor(canvasId, args) {
_canvas.toggle3D(this.isActive());
});
_canvas.set({
__canvasFrameType: _settings.canvasFrameType
__canvasFrameType: _settings.canvasFrameType,
__canvasFrameSize: _settings.canvasFrameSize,
});
} else {
_canvas.getButtonMenu()
@@ -1367,7 +1382,15 @@ function ImageEditor(canvasId, args) {
}
unit = typeof unit !== 'undefined' ? unit : _settings.unit;
_canvas.getViewport().set(width, height, unit);
var viewport = _canvas.getViewport();
var frameType = _canvas.__canvasFrameType;
if (frameType === 'image') {
var canvasFrameSize = unit === 'inch' ? _canvas.__canvasFrameSize / 2.54 : _canvas.__canvasFrameSize;
width += 2 * canvasFrameSize;
height += 2 * canvasFrameSize;
}
viewport.set(width, height, unit);
var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height);
if (shouldBeCropped) {
@@ -1853,7 +1876,7 @@ function Viewport(canvas) {
if (canvas.__type !== 'canvas') {
drawBeams();
} else {
self.setFrame(self.getFrameHandler().getFrameType());
self.setFrame(canvas.__canvasFrameType);
}
canvas.getDragbars().apply();