Fabric.js canvas 选择位置不正确
Fabric.js canvas selection location incorrect
我正在制作一个网页,我需要能够使用光标在 canvas 上绘制矩形。
我正在使用 Fabric.js 创建和操作 canvas.
我遇到的问题是,在 canvas 上进行选择时,选择并不完全位于光标位置。这导致很难在所需位置绘制矩形。
这是一个最小的复制示例:
<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/
情况如下:
这就是我想要的:
如果有人能告诉我我做错了什么(或我没有做什么),我会很高兴!
如您所见,不需要的偏移量与您为 canvas 选择的边框大小可疑地相似,对吧?它似乎用于计算 Fabric 库中的 canvas 坐标。所以我建议您不要在 canvas 元素上放置任何边框。如果你真的想要一个边框,只需用另一个 div 包裹你的 canvas 并在那里放置一个边框。问题已解决。
.canvas-wrapper {
border: 10px solid #efefef;
display: inline-block;
}
我正在制作一个网页,我需要能够使用光标在 canvas 上绘制矩形。 我正在使用 Fabric.js 创建和操作 canvas.
我遇到的问题是,在 canvas 上进行选择时,选择并不完全位于光标位置。这导致很难在所需位置绘制矩形。
这是一个最小的复制示例:
<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/
情况如下:
这就是我想要的:
如果有人能告诉我我做错了什么(或我没有做什么),我会很高兴!
如您所见,不需要的偏移量与您为 canvas 选择的边框大小可疑地相似,对吧?它似乎用于计算 Fabric 库中的 canvas 坐标。所以我建议您不要在 canvas 元素上放置任何边框。如果你真的想要一个边框,只需用另一个 div 包裹你的 canvas 并在那里放置一个边框。问题已解决。
.canvas-wrapper {
border: 10px solid #efefef;
display: inline-block;
}