Question

我已经做了一段时间的T恤设计师，而我已经差不多完成了！但是，我现在剩下的唯一问题是鼠标的协调性。我在这里待了几个小时，一直在寻找过去的问题以寻求答案或解决方案，但无济于事。我最接近答案的是调用canvas.calcOffSet（）;。功能，但这也不起作用。

下面是我的代码。

 //here is my html for my canvas 
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
                        <img name="tshirtview" id="tshirtFacing" src="tdesigner/img/crew_front.png">
                        <div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">                    
                                  <canvas id="tcanvas" width="200" height="400"></canvas>
                                      <img id="img" style="display: none;"/>
                        </div>

。

//my css for my canvas id:
             #tcanvas {
                 position: relative;
             }

。

//my Javascript
    </script>

    <!-- Le javascript
    ================================================== -->
    <script>


     var img = new Image(),
     tcanvas = document.getElementById("tcanvas"),
     savedImg;

         var canvas = document.getElementById( 'tcanvas' );

         canvas.on("after:render", function(){ canvas.calcOffset() });

} );

         canvas.renderAll();
         setTimeout(function() {
         canvas.calcOffset();
         },200);        
         });    


    </script>

JS看起来很糟糕，因为我删除了不必要的位（保存图像/显示图像功能）。我只包含了这些位，因为calcOffset（）;功能正在使用。

我的画布上的协调问题可以在下图看到：

Canvas coordination issue

正如您所看到的，我正在画布上选择一个自由空间，而选择的位置已经很远了，我无法移动图像，除非向上滚动以选择它们。

感谢您的阅读。希望我能对此有所注意。

滚动窗口时关闭HTML5 fabric.js画布鼠标的协调

0 个答案: