[英]Fabric.js canvas selection location incorrect
我正在制作一个网页,我需要能够使用 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/
如果有人能告诉我我做错了什么(或者我没有做什么),我会非常高兴!
如您所见,不需要的偏移量与您为 canvas 选择的边框尺寸可疑地相似,对吧? 似乎它用于 Fabric lib 中 canvas 坐标的计算。 因此,我建议您不要在 canvas 元素上放置任何边框。 如果你真的想要一个边框,只需用另一个 div 包裹你的 canvas 并在那里放一个边框。 问题解决了。
.canvas-wrapper {
border: 10px solid #efefef;
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.