Javascript Fabric.js相对于getZoom()和getWidth()/getHeight()定位元素
我将Fabric.js与React/Redux一起使用,并试图在画布上实现以下效果:(注意,我在顶部和左侧有两个标尺,在平移时,它们不应该移动,只是水平和垂直移动) 这是一段我试图获得的效果的视频: 我有以下代码:Javascript Fabric.js相对于getZoom()和getWidth()/getHeight()定位元素,javascript,canvas,fabricjs,Javascript,Canvas,Fabricjs,我将Fabric.js与React/Redux一起使用,并试图在画布上实现以下效果:(注意,我在顶部和左侧有两个标尺,在平移时,它们不应该移动,只是水平和垂直移动) 这是一段我试图获得的效果的视频: 我有以下代码: var canvas = new fabric.Canvas('c'); var topRuler = new fabric.Text('this is the top ruler', { top: 0, left: 60, selectable: false }); v
var canvas = new fabric.Canvas('c');
var topRuler = new fabric.Text('this is the top ruler', {
top: 0,
left: 60,
selectable: false
});
var leftRuler = new fabric.Text('this is the left ruler', {
top: 150,
left: -125,
selectable: false
});
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 180,
top: 100
});
var triangle = new fabric.Triangle({
fill: 'green',
left: 150,
top: 170
});
var panning = false;
var panningOn = false;
leftRuler.setAngle(-90).setCoords();
canvas.add(circle, triangle, topRuler, leftRuler);
canvas.renderAll();
canvas.on('mouse:up', function(e) {
if (panningOn) panning = false;
});
canvas.on('mouse:down', function(e) {
if (panningOn) panning = true;
});
canvas.on('mouse:move', function(e) {
if (panning && e && e.e) {
moveX = e.e.movementX;
moveY = e.e.movementY;
topRuler.set({
top: topRuler.top - moveY,
left: topRuler.left - moveX
});
leftRuler.set({
top: leftRuler.top - moveY,
left: leftRuler.left - moveX
});
canvas.relativePan(new fabric.Point(moveX, moveY));
}
});
$('#toggle').click(function() {
panningOn = !panningOn;
canvas.selection = !panningOn;
canvas.defaultCursor = 'default';
$('#toggle').html('Turn Panning ON');
if (panningOn) {
$('#toggle').html('Turn Panning OFF');
canvas.defaultCursor = 'move';
}
});
/* ZOOM FUNCTIONS */
$('#zoomIn').click(function(){
canvas.setZoom(canvas.getZoom() * 1.1 ) ;
});
$('#zoomOut').click(function(){
canvas.setZoom(canvas.getZoom() / 1.1 ) ;
});
这是一个正在工作的JSFIDLE:
代码不完整,因为我不知道如何准确定位标尺,尝试使用视口、画布大小等,但没有获得相同的效果
感谢您的帮助。以下是结果的屏幕截图: 以下是两个缩放功能:
/* ZOOM FUNCTIONS */
$('#zoomIn').click(function() {
rectangle.set({
width: rectangle.width * 1.1,
height: rectangle.height * 1.1
});
rectangle.setCoords();
textSample.set({
top: 60 + (textSample.top - 60) * 1.1,
left: 60 + (textSample.left - 60) * 1.1,
scaleX: textSample.scaleX * 1.1,
scaleY: textSample.scaleY * 1.1
});
textSample.setCoords();
setPins();
addLeftRuler();
addTopRuler();
resizeCanvas();
});
$('#zoomOut').click(function() {
rectangle.set({
width: rectangle.width / 1.1,
height: rectangle.height / 1.1
});
rectangle.setCoords();
textSample.set({
top: 60 + (textSample.top - 60) / 1.1,
left: 60 + (textSample.left - 60) / 1.1,
scaleX: textSample.scaleX / 1.1,
scaleY: textSample.scaleY / 1.1
})
textSample.setCoords();
setPins();
addLeftRuler();
addTopRuler();
resizeCanvas();
});
平移是使用第三方控件完成的,而且是传统的方式,因为这是视频显示的内容(并且是您想要的)——顶部和左侧标尺通过在滚动时更新其位置来保持在位
缩放是通过基于点(60,60)缩放单个对象来完成的-如视频中所示。引脚重置,标尺重新缩放,画布调整大小-根据需要
诀窍是在用户操作和事件触发时计算和重新计算所有内容
希望这能为你提供你需要建立的画布基础。
这是一个正在使用的JSFIDLE,.亲爱的@Tim你介意看看这个吗?