javascript - 放大fabricjs画布时如何正确放置对象?
问题描述
我正在使用fabricjs加载图像,使用鼠标滚轮放大指针位置,然后单击添加一个圆圈。
没有缩放时,在单击的位置创建对象。放大时,唯一正确放置的圆圈是您放大的位置(放大后不要移动鼠标,然后单击)。如果您在放大时单击其他任何位置,则圆圈将放置在其他位置。缩小后可以看到。
我已经经历了许多相关的堆栈答案。尝试了很多东西。没有解决方案奏效。我对fabricjs很陌生,整个定位系统似乎不必要地复杂。
即使放大,如何才能将圆圈移到单击图像的位置?
https://jsfiddle.net/wonx3qvd/
提前致谢。
canvas.on('mouse:wheel', function (opt) {
var delta = opt.e.deltaY;
var pointer = canvas.getPointer(opt.e);
var zoom = canvas.getZoom();
zoom = zoom - delta * 0.01;
if (zoom >= 20) {
zoom = 20;
}
if (zoom <= 1) {
zoom = 1;
canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
}
canvas.zoomToPoint({
x: opt.e.offsetX,
y: opt.e.offsetY
}, zoom);
canvas.forEachObject(function (o) {
o.setCoords();
});
opt.e.preventDefault();
opt.e.stopPropagation();
});
canvas.on('mouse:up', function (opt) {
if (opt.button === 1) {
circle = new fabric.Circle({
left: opt.e.offsetX,
top: opt.e.offsetY,
radius: 10,
strokeWidth: 3,
stroke: 'red',
fill: null,
opacity: .5,
selectable: false,
originX: 'center',
originY: 'center'
});
circle.setCoords();
group.addWithUpdate(circle);
canvas.renderAll();
canvas.calcOffset();
}
});
解决方案
只需将光标设置为您的圆圈对象的输入坐标...
var pointer = canvas.getPointer(opt.e);
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 10,
strokeWidth: 3,
stroke: 'red',
fill: null,
opacity: .5,
selectable: false,
originX: 'center',
originY: 'center'
});
var vw = $('#container').width();
var vh = $('#container').height();
var canvas, group, image = {}; // to be avail throughout
$('#container').append('<canvas id="canvasview" width="' + vw + '" height="' + vh + '"></canvas>');
var canvas = new fabric.Canvas("canvasview", {
fireRightClick: true,
stopContextMenu: false
});
canvas.setWidth(vw);
canvas.setHeight(vh);
canvas.imageSmoothingEnabled = false
var ogi = $('img');
$(ogi).on('load', function() {
// had to do this slop in particular case
oiw = ogi.width();
var ogs = ogi.attr('src');
ogi.remove();
var img = document.createElement("img");
img.src = ogs;
img.setAttribute("id", "photo");
//image ratio
var nw = img.width * vh / img.height;
image = new fabric.Image(img, {});
image.scaleToHeight(vh);
image.center();
var name = new fabric.Text("WALLPAPERIMAGE", {
left: 0,
top: 0,
fontSize: 10,
cornerSize: 6
});
group = new fabric.Group([image, name], {
lockMovementX: true,
lockMovementY: true,
hasControls: false,
hasBorders: false,
hasRotatingPoint: false,
subTargetCheck: true,
selectable: false
});
canvas.add(group);
group.scaleToHeight(vh);
group.clipPath = image;
group.center();
group.setCoords();
canvas.renderAll();
});
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var pointer = canvas.getPointer(opt.e);
var zoom = canvas.getZoom();
zoom = zoom - delta * 0.01;
if (zoom >= 20) {
zoom = 20;
}
if (zoom <= 1) {
zoom = 1;
canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
}
canvas.zoomToPoint({
x: opt.e.offsetX,
y: opt.e.offsetY
}, zoom);
canvas.forEachObject(function(o) {
o.setCoords();
});
opt.e.preventDefault();
opt.e.stopPropagation();
});
canvas.on('mouse:up', function(opt) {
if (opt.button === 1) {
//set your cursor as the input coordinates
var pointer = canvas.getPointer(opt.e);
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 10,
strokeWidth: 3,
stroke: 'red',
fill: null,
opacity: .5,
selectable: false,
originX: 'center',
originY: 'center'
});
circle.setCoords();
group.addWithUpdate(circle);
canvas.renderAll();
canvas.calcOffset();
}
});
#container {
width: 600px;
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>
<img src="https://wallpaper-gallery.net/top/wallpapers-1.jpg" />
推荐阅读
- ios - Xcode 11:尝试在模拟器上运行时,此时无法安装应用程序
- python - 如何使用 Python Selenium Pandas 将 Xpath 打印到 Gsheets?
- javascript - 使用 EVAL 命令创建 IF 语句
- javascript - 如何在 redux 中调度函数?
- java - 使用 Java 8 Streams 根据另一个列表过滤列表
- react-native - 想要在抽屉导航中显示登录用户的详细信息
- node.js - 如何解决`TypeError: person.save is not a function` - 出了什么问题?
- c# - 如何使用 SqlCommand() 在 C# 中指定只读查询
- unity3d - 统一着色器导致细节丢失
- javascript - 使用 XMLHttpRequest() 加载后的 javascript 函数“未定义”