Mouse control is not working with object movement. Fabric Js
Question
I am trying to create a responsive canvas and while I am doing that I am facing issues related to the transform tool object movement and selection.
Can you please help me where I am doing wrong?
In this code, I am creating canvas dynamically using JSON and underscore js
Here are the steps
- Launch the code
- Resize te window
- Check now you will see controls are not working.
Here are my code
<!DOCTYPE html>
<html>
<head>
<title>Fit Canvas Within Perticular area Using this code your canvas will fit inside any container </title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"> </script>
<script type="text/javascript" src="http://5945822.swh.strato-hosting.eu//ma-test/test-0124-2/js/all.js"></script>
<script type="text/html" id='canvas-template'>
<% _.each(viewList,function(view,key,list){ %>
<div class="view-wrapper" data-editor-view-id="<%=view.viewId %>" style="width:<%=view.imageWidth%>px; height:<%=view.imageHeight%>px; position:relative">
<img data-component-type="product-image" src="https://livingannuityspecialist.co.za/wp-content/uploads/2019/03/retirement.jpg" class="productImage" width="<%=view.imageWidth%>" height="<%=view.imageHeight%>" />
<div class="canvas-wrapper" style="position:absolute; width:<%=view.width%>px; height:<%=view.height%>px; left: <%=view.left%>px; top: <%=view.top%>px;">
<canvas id="<%=view.applicationType%>_<%=view.viewId%>" width="<%=view.width%>" height="<%=view.height%>" ></canvas>
</div>
</div>
<% }); %>
</script>
<body>
<div id="target_container" style="width:100%; height:100%;">
</div>
<button onClick="addImage()">Add Image </button>
<script>
/* List of canvas */
var canvas;
var viewDetailsList=[
{
"width":1880,"height":977,"top":0,"left":0,"imageWidth":1880,"imageHeight":977,"viewId":2603,"title":"front","imageSrc":"1.png","applicationType":"editor"
}]
var template = $("#canvas-template").html();
$('#target_container').html(_.template(template)({viewList:viewDetailsList}));
var $targetContainer=$('#target_container');
/* Calculate Scale Factor according to Outer container */
function calculateScaleFactor(viewId) {
var viewContainer = $('[data-editor-view-id="' + viewId + '"]');
var cssWidthScale = $targetContainer.width() / viewContainer.width();
var cssHeightScale = $targetContainer.height() / viewContainer.height();
var scaleFactor = Math.min(cssWidthScale, cssHeightScale);
return scaleFactor;
}
/* Fit Canvas to perticular target or div according to width and height of div
Let's say If I wan to fix perticular canvas of width 1000px and height 1000px to 500px by 500px then I waant to calculate the scaleFactor for fitting 1000px canvas inside the 500px area.
*/
function setCanvasCSS(viewId){
var scaleFactor= calculateScaleFactor(viewId);
var viewContainer = $('[data-editor-view-id="' + viewId + '"]');
var scaling= 'scale(' + scaleFactor + ',' + scaleFactor + ')'
viewContainer.css({'transform': scaling,'-webkit-transform': scaling,'-moz-transform': scaling,'-o-transform': scaling});
var leftPos = ($targetContainer.width() - viewContainer.width() * scaleFactor) / 2;
var topPos = ($targetContainer.height() - viewContainer.height() * scaleFactor) / 2;
viewContainer.css({'left': leftPos,'top':topPos});
}
/* Iteration for Multiple Canvas*/
$.each(viewDetailsList,function(key, view){
setCanvasCSS(view.viewId);
})
/*Window.Resize canvas setting */
$(window).resize(function(){
setCanvasCSS(viewDetailsList[0].viewId);
canvas.getObjects().forEach(function(obj){
obj.setCoords();
canvas.renderAll();
canvas.calcOffset();
})
});
/* Create Canvas */
canvas = new fabric.Canvas('editor_2603');
/* Add Image */
function addImage(){
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
var imgObj = new Image();
imgObj.src = imgURL
imgObj.onload = function() {
var image = new fabric.Image(imgObj);
image.set({
left: 10,
top: 10,
}).scale(0.2);
canvas.add(image);
image.setCoords();
canvas.renderAll();
canvas.calcOffset();
};
}
</script>
<style>
#target_container{border:1px solid red;}
.view-wrapper{transform-origin:0% 0%;overflow:hidden;}
.canvas-wrapper{border: 5px solid green;}
</style>
</body>
</html>
1 answers
solution1
0 2019-06-01 03:43:02
I got the fixed I have updated the latest fabric.js and its working properly for me
<!DOCTYPE html>
<html>
<head>
<title>Fit Canvas Within Perticular area Using this code your canvas will fit inside any container </title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.js"></script>
<script type="text/html" id='canvas-template'>
<% _.each(viewList,function(view,key,list){ %>
<div class="view-wrapper" data-editor-view-id="<%=view.viewId %>" style="width:<%=view.imageWidth%>px; height:<%=view.imageHeight%>px; position:relative">
<img data-component-type="product-image" src="https://livingannuityspecialist.co.za/wp-content/uploads/2019/03/retirement.jpg" class="productImage" width="<%=view.imageWidth%>" height="<%=view.imageHeight%>" />
<div class="canvas-wrapper" style="position:absolute; width:<%=view.width%>px; height:<%=view.height%>px; left: <%=view.left%>px; top: <%=view.top%>px;">
<canvas id="<%=view.applicationType%>_<%=view.viewId%>" width="<%=view.width%>" height="<%=view.height%>" ></canvas>
</div>
</div>
<% }); %>
</script>
<body>
<div id="target_container" style="width:100%; height:100%;">
</div>
<button onClick="addImage()">Add Image </button>
<script>
/* List of canvas */
var canvas;
var viewDetailsList=[
{
"width":1880,"height":977,"top":0,"left":0,"imageWidth":1880,"imageHeight":977,"viewId":2603,"title":"front","imageSrc":"1.png","applicationType":"editor"
}]
var template = $("#canvas-template").html();
$('#target_container').html(_.template(template)({viewList:viewDetailsList}));
var $targetContainer=$('#target_container');
/* Calculate Scale Factor according to Outer container */
function calculateScaleFactor(viewId) {
var viewContainer = $('[data-editor-view-id="' + viewId + '"]');
var cssWidthScale = $targetContainer.width() / viewContainer.width();
var cssHeightScale = $targetContainer.height() / viewContainer.height();
var scaleFactor = Math.min(cssWidthScale, cssHeightScale);
return scaleFactor;
}
/* Fit Canvas to perticular target or div according to width and height of div
Let's say If I wan to fix perticular canvas of width 1000px and height 1000px to 500px by 500px then I waant to calculate the scaleFactor for fitting 1000px canvas inside the 500px area.
*/
function setCanvasCSS(viewId){
var scaleFactor= calculateScaleFactor(viewId);
var viewContainer = $('[data-editor-view-id="' + viewId + '"]');
var scaling= 'scale(' + scaleFactor + ',' + scaleFactor + ')'
viewContainer.css({'transform': scaling,'-webkit-transform': scaling,'-moz-transform': scaling,'-o-transform': scaling});
var leftPos = ($targetContainer.width() - viewContainer.width() * scaleFactor) / 2;
var topPos = ($targetContainer.height() - viewContainer.height() * scaleFactor) / 2;
viewContainer.css({'left': leftPos,'top':topPos});
}
/* Iteration for Multiple Canvas*/
$.each(viewDetailsList,function(key, view){
setCanvasCSS(view.viewId);
})
/*Window.Resize canvas setting */
$(window).resize(function(){
setCanvasCSS(viewDetailsList[0].viewId);
canvas.getObjects().forEach(function(obj){
obj.setCoords();
canvas.renderAll();
canvas.calcOffset();
})
});
/* Create Canvas */
canvas = new fabric.Canvas('editor_2603');
/* Add Image */
function addImage(){
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
var imgObj = new Image();
imgObj.src = imgURL
imgObj.onload = function() {
var image = new fabric.Image(imgObj);
image.set({
left: 10,
top: 10,
}).scale(0.2);
canvas.add(image);
image.setCoords();
canvas.renderAll();
canvas.calcOffset();
};
}
</script>
<style>
#target_container{border:1px solid red;}
.view-wrapper{transform-origin:0% 0%;overflow:hidden;}
.canvas-wrapper{border: 5px solid green;}
</style>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Controlling Webgl Mesh Rotation with the camera movement. [three.js]
Control mouse movement with Protractor
Fabric JS using mouse:over on an animating object
Fabric JS: Copy/paste object on mouse down
javascript, timeout, button, movement.
Fabric JS multiple object selection ignores movement isDisabled
js: stop mouse movement
Fabric.js - Attach object creation to mouse click
Fabric.js Resize object not working properly
Fabric JS; How to make an object unmovable until the object is "fully" clicked (mouse down and mouse up)
Related Tags