我正在尝试创建一个响应式画布，而与此同时，我面临着与变换工具对象移动和选择有关的问题。
你能帮我哪里做错了吗？
在这段代码中，我使用JSON和下划线js动态创建画布
这是步骤
这是我的代码
<!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>
答案 0 :(得分：0)
我已经解决了问题，我已经更新了最新的fabric.js及其对我来说正常工作
<!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>