我正在使用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();
}
});
只需将光标设置为cirlce对象的输入坐标...
var pointer = canvas.getPointer();
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();
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" />