Javascript Fabric.js画布选择位置不正确_Javascript_Canvas_Fabricjs_Selection

Javascript Fabric.js画布选择位置不正确

javascript canvas

Javascript Fabric.js画布选择位置不正确,javascript,canvas,fabricjs,selection,Javascript,Canvas,Fabricjs,Selection,我正在制作一个网页，我需要能够在画布上用光标绘制矩形。我正在使用Fabric.js创建和操作画布我遇到的问题是，在画布上选择时，选择并不完全在光标位置。这导致很难在所需位置绘制矩形下面是一个简单的例子： <html> <head> <style> #image_canvas { border: 10px solid #efefef; } </style> </hea

我正在制作一个网页，我需要能够在画布上用光标绘制矩形。我正在使用Fabric.js创建和操作画布

我遇到的问题是，在画布上选择时，选择并不完全在光标位置。这导致很难在所需位置绘制矩形

下面是一个简单的例子：

<html>
<head>
    <style>
        #image_canvas {
            border: 10px solid #efefef;
        }
    </style>
</head>
<body>
    <canvas id="image_canvas"></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
    <script>
        var canvas;

        $(document).ready(function () {
            canvas = new fabric.Canvas("image_canvas");
        });
    </script>
</body>
</html>


#帆布图像{
边框：10px实心#efef；
}
var帆布；
$（文档）.ready（函数（）{
canvas=新的fabric.canvas（“image_canvas”）；
});

发生的情况如下：

这就是我想要的：

如果有人能告诉我我做错了什么（或我没有做什么），我会非常高兴

如您所见，不需要的偏移量与您为画布选择的边框大小非常相似，对吗？它似乎用于计算结构库中的画布坐标。所以我建议您不要在画布元素上添加任何边框。如果你真的想要一个边框，就用另一个div包住你的画布，在那里放一个边框。问题解决了

.canvas-wrapper {
    border: 10px solid #efefef;
    display: inline-block;
}

示例：

@WesselOttevanger顺便说一句，这里的工作示例：，

内联块

对于包装器来说效果最好。