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

【问题标题】：Fabric.js canvas selection location incorrectFabric.js 画布选择位置不正确
【发布时间】：2020-12-22 00:29:01
【问题描述】：

我正在制作一个网页，我需要能够使用光标在画布上绘制矩形。我正在使用 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>

https://jsfiddle.net/0uc6rLhg/

会发生以下情况：

这就是我想要的：

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

【问题讨论】：

标签： javascript canvas fabricjs selection

【解决方案1】：

如您所见，不需要的偏移量与您为画布选择的边框大小可疑地相似，对吧？似乎它用于 Fabric 库中画布坐标的计算。所以我建议你不要在画布元素上放置任何边框。如果你真的想要一个边框，只需用另一个 div 包裹你的画布并在那里放置一个边框。问题解决了。

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

示例：https://jsfiddle.net/smajl/2er0kvoq/1

【讨论】：

@WesselOttevanger Btw，这里的工作示例：jsfiddle.net/smajl/2er0kvoq，inline-block 包装器效果最好。