I am trying to implement a button that can recenter the canvas. The idea is that when the button is clicked, it will trigger the rec() method which should reposition the canvas that was created in the mounted() function.
However, this setup is not working as expected. I suspect that the methods are having trouble referencing elements created within the mounted() function.
Any suggestions on how to resolve this issue?
<div id="main">
<canvas id="c" width="400" height="400"></canvas>
</div>
<button v-on:click="recenter">Recenter</button>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.js"></script>
<script>
const app = new Vue(
{
el: '#main',
methods: {
recenter: function rec() {
var fabric_canvas = new fabric.Canvas('c')
fabric_canvas.setViewportTransform([1,0,0,1,0,0]);
}
},
mounted() {
var fabric_canvas = new fabric.Canvas('c');
var group = [];
var myurl = "https://upload.wikimedia.org/wikipedia/commons/a/a0/Svg_example1.svg";
fabric.loadSVGFromURL(
myurl,
function(objects,options) {
var loadedObjects = new fabric.Group(group);
fabric_canvas.add(loadedObjects);
fabric_canvas.renderAll();
},
function(item, object) {
group.push(object);
}
);
}
}
);
</script>