0
总之，我正在制作一个应用程序，人们可以合作并绘制图像。正常化FabricJS中的绘图吗？
我现在有一个概念验证，但我注意到，如果两个人协作使用不同大小的窗口，那么这些图形在其他人的浏览器上显示的尺寸不正确。
解决方案是将归一化绘图输入，使得点被表示为它们跨越在画布的百分比，而不是绝对的像素值。但是，我不知道如何在FabricJS中执行此操作。最后，我需要确定该解决方案在缩放时也能正常工作。
任何正常化绘图输入的建议，将不胜感激！作为参考，这里是我的代码到目前为止。
被警告：我以前从未使用FabricJS，所以此代码示例是几篇博文和SO答案的混搭。 这是不好的代码，将完全重构，如果FabricJS是我决定去与
的重要线路已经评价
document.addEventListener('DOMContentLoaded',() => {
const room = window.location.href.split('/').pop();
const socket = io.connect();
socket.on('connect',() => {
socket.emit('room', room);
});
var canvas = new fabric.Canvas('map', {
isDrawingMode: true
});
let size = Math.min(window.innerWidth, window.innerHeight);
canvas.setHeight(size);
canvas.setWidth(size);
var img = new Image();
img.onload = function() {
canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
width: canvas.width,
height: canvas.height,
});
};
img.src = "/images/map.jpg";
canvas.wrapperEl.addEventListener('wheel', (e) => {
if (e.deltaY <= 0) {
canvas.zoomToPoint({
x: e.offsetX,
y: e.offsetY
}, canvas.getZoom() * 1.1);
} else {
canvas.zoomToPoint({
x: e.offsetX,
y: e.offsetY
}, canvas.getZoom() * 0.9);
}
});
canvas.on('path:created', function (e) {
// This is where I need to normalize the path data
canvas.remove(fabric.Path.fromObject(JSON.stringify(e.path)));
socket.emit('draw_line', {
line: e.path.toJSON(),
room: room
});
});
socket.on('draw_line', function (path) {
// This is where I need to convert the path data from percentages to real size
fabric.util.enlivenObjects([path], function (objects) {
objects.forEach(function (o) {
canvas.add(o);
});
});
});
var panning = false;
canvas.on('mouse:up', function (e) {
panning = false;
});
canvas.on('mouse:out', function (e) {
panning = false;
});
canvas.on('mouse:down', function (e) {
panning = true;
});
canvas.on('mouse:move', function (e) {
//allowing pan only if the image is zoomed.
if (panning && e && e.e && e.e.shiftKey) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas.relativePan(delta);
}
});
});