Use getBoundingClientRect to calculate viewport (works cross browser).
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 22 Feb 2017 16:29:02 +0100
changeset 345 4bf0f6ff748d
parent 344 15927a4f5c19
child 346 ff784774b131
Use getBoundingClientRect to calculate viewport (works cross browser).
src_js/iconolab-bundle/src/components/editor/Canvas.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Feb 22 16:28:03 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Feb 22 16:29:02 2017 +0100
@@ -4,7 +4,13 @@
             <svg ref="svg"
                 v-bind:class="{ 'cut-canvas': true, 'canvas--rect': mode === 'rect', 'canvas--free': mode === 'free' }"
                 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                <image ref="image" v-if="loaded" xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:xlink:href="image" x="0" y="0" />
+                <image xmlns:xlink="http://www.w3.org/1999/xlink"
+                    ref="image"
+                    v-if="loaded"
+                    v-bind:xlink:href="image"
+                    x="0" y="0"
+                    v-bind:width="imageWidth"
+                    v-bind:height="imageHeight" />
                 <shape-rect ref="rect" v-show="loaded &amp;&amp; mode == 'rect'"
                     v-bind:paper="paper"
                     v-bind:original-annotation="annotation"
@@ -154,17 +160,20 @@
 
                 this.imgMinSize = Math.min(img.width, img.height);
 
+                console.log('Image: %s x %s', img.width, img.height);
+
                 // FIXME
                 // Image is actually NOT loaded at this step
                 setTimeout(() => {
 
-                    console.log('Viewport: %s x %s',
-                        this.paper.node.clientWidth, this.paper.node.clientHeight);
+                    var bcr = this.paper.node.getBoundingClientRect();
+
+                    console.log('Viewport: %s x %s', bcr.width, bcr.height);
 
                     var viewBox = [0 , 0, img.width, img.height];
                     var viewport = {
-                        width: this.paper.node.clientWidth,
-                        height: this.paper.node.clientHeight
+                        width: bcr.width,
+                        height: bcr.height
                     };
 
                     Object.assign(this, {
@@ -465,11 +474,12 @@
 
                     if (this.$refs.rect.width === 0 && this.$refs.rect.height === 0) {
                         var currentPosition = this.computeOffset(e);
+                        var size = this.imgMinSize / 4;
                         Object.assign(this.$refs.rect, {
-                            x: currentPosition.x,
-                            y: currentPosition.y,
-                            width: this.imgMinSize / 4,
-                            height: this.imgMinSize / 4,
+                            x: currentPosition.x - (size / 2),
+                            y: currentPosition.y - (size / 2),
+                            width: size,
+                            height: size,
                         });
                     }