javascript - 模态内的Fabricjs画布导致鼠标坐标偏移
问题描述
我是Fabric.js库的新手。我的鼠标坐标有问题。我想克隆模态内的标记,但坐标不正确。我制作了这个jsfiddle示例,您将在其中更好地了解发生了什么。
这是我的代码:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<canvas id="c" height="600" width="632"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JavaScript:
var canvas = new fabric.Canvas('c');
$('#myModal').on('show.bs.modal', function (e) {
// Ugly! Wish there was a better way than waiting for the modal to load!
setTimeout(function(){
canvas.calcOffset();
}, 1000);
});
var mousecursor = new fabric.Circle({
left: 0,
top: 0,
radius: 5,
fill: '#9f9',
originX: 'right',
originY: 'bottom',
})
canvas.add(mousecursor);
canvas.on('mouse:move', function(obj) {
mousecursor.top = obj.e.y - mousecursor.radius;
mousecursor.left = obj.e.x - mousecursor.radius;
canvas.renderAll()
})
canvas.on('mouse:out', function(obj) {
// put circle off screen
mousecursor.top = -100;
mousecursor.left = -100;
canvas.renderAll()
})
canvas.on('mouse:up', function(obj) {
canvas.add(mousecursor.clone())
canvas.renderAll()
})
解决方案
推荐阅读
- html - 在CSS中放入一些内容后如何初始化div宽度并自动更改?
- javascript - 如何将函数中的逻辑动态注入脚本元素
- c - fscanf 将其变量添加到另一个预定义变量中?
- mysql - mysql select查询与两列的sum和group by
- r - 如何从与数据框中其他列的最大值对应的列中检索值
- image - 在 Flutter 中将 CameraImage 转换为 ui.Image
- jenkins - 如何正确使用 Jenkins Warnings Next Generation Plugin 的三个步骤?
- html - .htaccess 用于内容语言
- python - 我可以通过 Buildozer 从 opencv-contrib-python 导入类以进行人脸识别吗?
- python - 如何通过视图在路径中插入 django 用户的用户名?