Prepare frame rendering in Viewport

2017-05-15 20:59:29 +02:00
parent 4617f9f92d
commit 4806a3e072
3 changed files with 88 additions and 1 deletions
@@ -129,6 +129,80 @@ 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.getData = function () {
        return _data;
    };