HTML5 fabric.js холст мыши координации при прокрутке окна - PullRequest
Новая
       23

HTML5 fabric.js холст мыши координации при прокрутке окна

0 голосов
/ 01 марта 2019

Я уже давно занимаюсь дизайном футболок, и я почти закончил с этим!Но единственная проблема, которую я оставил сейчас, - это координация мышки.Я часами просматриваю прошлые вопросы, чтобы найти ответ или решение, но безрезультатно.Самым близким, что я получил к ответу, был вызов 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 ();используются функции.

Вопрос координации на моем холсте можно увидеть на изображении ниже:

Вопрос координации холста

Как вы можете видетьЯ выбираю свободное место на холсте, и выбор уже закончен, я не могу переместить мои изображения, не прокрутив обратно их вверх.

Спасибо за чтение.Надеюсь, я смогу получить некоторые заметки по этому поводу.

...