gpt4 book ai didi

javascript - 使用 fabricjs 模拟自由绘图

转载 作者:行者123 更新时间:2023-12-04 01:50:20 25 4
gpt4 key购买 nike

我正在开发带有白板的应用程序。白板应该像 idroo.com 一样工作。一个用户正在画一些东西,另一个用户应该能够在他的浏览器上实时看到它。我使用 fabricjs 作为 Canvas 包装器,它拥有我需要的一切。但我无法在 Canvas 上模拟自由绘图。我将鼠标位置和画笔选项发送到远程客户端,并尝试通过触发鼠标移动事件来呈现它们。但它不起作用。如果有人有类似的问题,你能帮忙吗?

canvasContainer.on('mousemove', function (e) {      
var left = canvasContainer.offset().left;
var top = canvasContainer.offset().top;
var x = e.pageX - left;
var y = e.pageY - top;
//Send data to remote browser by socket.io or signalr
//I need to draw on remote browser by these x and y coordinates.
updateCursor(_connections, x, y);
});

最佳答案

你可以这样做:

var brush = new fabric.PencilBrush(canvas);
var points = [[10,10], [20,20], [25,70],[100,300]];

brush.onMouseDown({x:points[0][0], y:points[0][1]});
for(var i=1;i<points.length;i++) {
brush.onMouseMove({x:points[i][0], y:points[i][1]});
}

在这里查看 plunker:https://plnkr.co/edit/V1c1xkB29tgB2ha99CRQ?p=preview

您可以简化计算 x 和坐标的代码,如下所示:

var point = canvas.getPointer(e);

关于javascript - 使用 fabricjs 模拟自由绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40595783/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com