鼠標控制不適用於對象移動。面料Js

Question

我正在嘗試創建一個響應式畫布，當我這樣做時，我面臨與變換工具對象移動和選擇相關的問題。

你能在我做錯的地方幫助我嗎？

在這段代碼中，我使用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>

Answer 1

我得到了修復我已經更新了最新的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>

鼠標控制不適用於對象移動。面料Js

問題描述

1 個解決方案

解決方案1
0 2019-06-01 03:43:02

鼠標控制不適用於對象移動。 面料Js

問題描述

1 個解決方案

解決方案1 0 2019-06-01 03:43:02

鼠標控制不適用於對象移動。面料Js

解決方案1
0 2019-06-01 03:43:02