--- 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)"></shape-rect>
+ v-on:click="onAnnotationClick(annotation)"
+ v-bind:stroke-width="strokeWidth"></shape-rect>
<shape-free
v-for="annotation in normalizedAnnotations"
:key="annotation.annotation_guid"
@@ -41,6 +42,7 @@
<shape-rect ref="rect"
v-show="loaded && !readonly && mode == 'rect'"
v-bind:paper="paper"
+ v-bind:stroke-width="strokeWidth"
:readonly="false"></shape-rect>
<shape-free ref="free"
v-show="loaded && !readonly && mode == 'free'"
@@ -158,6 +160,7 @@
imageHeight: 0,
readonly: false,
strokeWidth: 15,
+ imageRatio: 1
}
},
computed: {
@@ -211,14 +214,21 @@
height: bcr.height
};
- var handlerSize = 15 * Math.min(viewBox[2], viewBox[3]) / viewport.width;
+ var imageRatio = 1;
+ if (this.imageWidth > 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;