diff -r 1c07ea9abcd5 -r 04ac84f80eb3 src_js/iconolab-bundle/src/components/editor/Canvas.vue --- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue Fri Mar 17 18:05:37 2017 +0100 +++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue Fri Mar 17 18:17:07 2017 +0100 @@ -24,7 +24,8 @@ v-bind:original-annotation="annotation" v-bind:original-path="annotation.path" v-bind:readonly="readonly" - v-on:click="onAnnotationClick(annotation)"> + v-on:click="onAnnotationClick(annotation)" + v-bind:stroke-width="strokeWidth"> this.imageHeight) { + imageRatio = viewport.width / this.imageWidth; + } + if (this.imageHeight > this.imageWidth) { + imageRatio = viewport.height / this.imageHeight; + } - this.$refs.rect.handlerSize = handlerSize; + var strokeWidth = imageRatio > 1 ? (2 * imageRatio) : (2 / imageRatio); Object.assign(this, { viewBox: viewBox, viewport: viewport, - strokeWidth: handlerSize / 4, + imageRatio: imageRatio, + strokeWidth: strokeWidth }); this.paper.attr({"viewBox": this.viewBox}); @@ -276,13 +286,12 @@ this.paper = new Snap(this.$refs.svg); - this.imgMinSize = Math.min(img.width, img.height); - console.log('Image: %s x %s', img.width, img.height); Object.assign(this, { imageWidth: img.width, imageHeight: img.height, + imgMinSize: Math.min(img.width, img.height), loaded: true }); @@ -398,10 +407,6 @@ return { x: offsetX, y: offsetY }; }, - computeHandlerSize: function(e) { - return 60 * Math.min(this.viewBox[2], this.viewBox[3]) / this.imageWidth; - }, - normalizePath: function(path) { var xRatio = 100 / this.imageWidth;