Fabri cJS предотвращает исчезновение объекта с холста при уменьшении - PullRequest
0 голосов
/ 26 февраля 2020

Я работаю с Fabri cJS и хочу добиться sh поддержки увеличения / уменьшения. Всегда хочется, чтобы этот элемент был виден на холсте. Это особенно сложно, когда применяется уменьшение масштаба с помощью zoomToPoint.

var canvas = new fabric.Canvas('c');
var circle = new fabric.Rect({
  left: 100,
  top: 50,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 0,
  padding: 10
});
canvas.add(circle);

canvas.on({
  'mouse:wheel': (event) => {
    var delta = event.e.deltaY;
    var zoom = canvas.getZoom();
    if (delta > 0) {
      zoom -= 0.05;
    } else {
      zoom += 0.05;
    }
   
    var circleRect = circle.getBoundingRect();

    // How to prevent that circle disappears from canvas when zoom-out?
    // Is there a way to calculate circle is on screen before zoomToPoint happens? 
    // Or alternative way revert `zoomToPoint()`
    //
    var isOnScreen = circle.isOnScreen();
    var circleStatus = isOnScreen ? "Yes": "No";
    console.log(`Circle is ${circleStatus} of screen.`);

    if( zoom > 0.2 ) {
      canvas.zoomToPoint({x: event.e.offsetX, y: event.e.offsetY}, zoom);

      // or alternative way: if( !circle.isOnScreen() ) { revert_zoomToPoint();  }
    }
   
    event.e.preventDefault();
    event.e.stopPropagation();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.js" type="text/javascript"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid black; margin-left: 50px; margin-top: 50px;"></canvas>

РЕДАКТИРОВАТЬ

Я решил это, вернув зум после установки масштаба на первом месте:

if( zoom > 0.2 ) {
  canvas.zoomToPoint({x: event.e.offsetX, y: event.e.offsetY}, zoom);
  if(!circle.isOnScreen()) {
    zoom -= 0.05;
    canvas.zoomToPoint({x: event.e.offsetX, y: event.e.offsetY}, zoom);
  }
}

Работает, но не тестировал все возможные комбинации. Я ищу наилучший подход / лучшую практику?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...