123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- var app = (function() {
- var width = window.innerWidth;
- var height = window.innerHeight;
- var layers = [];
- var _layer = [];
- var stage = new Konva.Stage({
- container: "container",
- width: width,
- height: height
- });
- var screen = {
- width: width,
- height: height
- };
- function createLayer() {
- var sequence = 0;
- if (layers == null || layers.length == 0) {
- sequence++;
- } else {
- sequence = layers.length + 1;
- }
- var layer = { sequence: sequence, layer: new Konva.Layer() };
- layers.push(layer);
- if (currentLayer() == undefined && _layer.length == 0) {
- _layer = [];
- _layer.push(layer);
- }
- return layer;
- }
- function bootstrap() {
- createLayer();
- configureDragAndDrop();
- layer = currentLayer();
- }
- function currentLayer() {
- if (_layer[0] == undefined) return undefined;
- return _layer[0].layer;
- }
- function configureDragAndDrop() {
- stage.on("click tap", function(e) {
- if (e.target === stage) {
- stage.find("Transformer").destroy();
- layer.draw();
- return;
- }
- stage.find("Transformer").destroy();
- var tr = new Konva.Transformer({
- anchorStrokeWidth: 2
- });
- layer.add(tr);
- tr.attachTo(e.target);
- layer.draw();
- });
- }
- return {
- stage: stage,
- currentLayer: currentLayer,
- createLayer: createLayer,
- screen: screen,
- bootstrap: bootstrap,
- layers: layers
- };
- })();
|