Fabric.js canvas 選擇位置不正確

Question

我正在制作一個網頁，我需要能夠使用 cursor 在 canvas 上繪制矩形。 我正在使用 Fabric.js 創建和操作 canvas。

我遇到的問題是，在 canvas 上選擇時，選擇並不完全在 cursor position 上。 這導致在所需位置上繪制矩形非常困難。

這是一個最小的繁殖示例：

<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/

這是發生的事情：

這就是我想要的：

如果有人能告訴我我做錯了什么（或者我沒有做什么），我會非常高興！

Answer 1

如您所見，不需要的偏移量與您為 canvas 選擇的邊框尺寸可疑地相似，對吧？ 似乎它用於 Fabric lib 中 canvas 坐標的計算。 因此，我建議您不要在 canvas 元素上放置任何邊框。 如果你真的想要一個邊框，只需用另一個 div 包裹你的 canvas 並在那里放一個邊框。 問題解決了。

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

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

Fabric.js canvas 選擇位置不正確

問題描述

1 個解決方案

解決方案1
1 已采納 2020-12-21 16:22:27

Fabric.js canvas 選擇位置不正確

問題描述

1 個解決方案

解決方案1 1 已采納 2020-12-21 16:22:27

解決方案1
1 已采納 2020-12-21 16:22:27