Я работаю с 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);
}
}
Работает, но не тестировал все возможные комбинации. Я ищу наилучший подход / лучшую практику?