Неверное расположение выбора холста Fabric.js
Я делаю веб-страницу, где мне нужно иметь возможность рисовать прямоугольники на холсте с помощью курсора. Я использую 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как видите, нежелательное смещение подозрительно похоже на тот размер границы, который вы выбрали для холста, верно? Похоже, он используется для вычисления координат холста внутри библиотеки Fabric. Поэтому я бы посоветовал вам просто не размещать границу на элементе холста. Если вам действительно нужна рамка, просто оберните свой холст другим блоком и поместите туда границу. Задача решена.
.canvas-wrapper {
border: 10px solid #efefef;
display: inline-block;
}
Пример: https://jsfiddle.net/smajl/2er0kvoq/1
@WesselOttevanger Кстати, рабочий пример здесь: jsfiddle.net/smajl/2er0kvoq,
inline-blockдля обертки работает лучше всего.