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

Add handling of frames for canvas

Browse Source
This commit is contained in:
Rikard Bartholf
2017-05-16 10:50:59 +02:00
parent 4806a3e072
commit ab147d6af6
2 changed files with 139 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/components/ImageEditor/Viewport.js
+8 -67
View File
@@ -1,5 +1,6 @@
'use strict';
var FrameHandler = require('./FrameHandler');
var GoreHandler = require('./GoreHandler');
var RulerHandler = require('./RulerHandler');
var util = require('../util');
@@ -129,84 +130,24 @@ function Viewport(canvas) {
canvas.getButtonMenu().bringToFront();
};
var _frames = [];
function getFrame(borderType) {
_frames.forEach(function (o) {
canvas.remove(o);
});
_frames = [];
var frames = {
top: new fabric.Rect({
fill: 'transparent',
width: _data.width - (_data.ppmm * 29) * 2,
height: _data.ppmm * 29,
stroke: '#000',
strokeWidth: 1
}),
right: new fabric.Rect({
fill: 'transparent',
width: _data.ppmm * 29,
height: _data.height - (_data.ppmm * 29) * 2,
stroke: '#000',
strokeWidth: 1
})
};
frames.bottom = frames.top.clone();
frames.left = frames.right.clone();
}
/**
* @param {string} frameType white|black|image|none
* @return {Viewport}
*/
this.setFrame = function (frameType) {
/*
_rect = new fabric.Rect({
evented: false,
fill: 'transparent',
width: _data.width,
height: _data.height,
stroke: '#fff',
strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
});
*/
console.log(_data.image)
var frames = {
top: new fabric.Rect({
fill: 'transparent',
width: _data.width - (_data.ppmm * 29) * 2,
height: _data.ppmm * 29,
stroke: '#000',
strokeWidth: 1,
top: _data.image.top - 1
}),
right: new fabric.Rect({
fill: 'transparent',
width: _data.ppmm * 29,
height: _data.height - (_data.ppmm * 29) * 2,
stroke: '#000',
strokeWidth: 1
})
};
frames.bottom = frames.top.clone().set({
top: (_data.image.top + _data.image.height) - frames.top.height
});
frames.left = frames.right.clone();
frames.top.addTo(canvas).centerH();
frames.bottom.addTo(canvas).centerH();
canvas.renderAll()
this.getFrameHandler().setFrames(frameType);
}
this.getData = function () {
return _data;
};
var _frameHandler = null;
this.getFrameHandler = function () {
return _frameHandler || (_frameHandler = new FrameHandler(this));
};
this.getGores = function () {
return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
};