如何使 fabricJS canvas 在移动设备上水平拖动？
How to make a fabricJS canvas draggable horizontally on mobile?
我正在尝试创建一个比我的手机屏幕更宽的 canvas，用户可以左右拖动以查看 canvas 的其余部分。但由于某种原因，从 canvas.
内部拖动不起作用
如果我在它下方（canvas 之外）页面可以左右拖动，但不能在canvas 内拖动。我该如何解决？
理想情况下，我只希望 canvas 内有一个滚动条，这样人们就可以在移动设备上左右拖动，同时不会增加整个页面的宽度。
我尝试在 canvas 上设置 overflow:scroll，但我仍然无法拖动它。我还添加了 pointer-events: none;，这允许在聚焦于 canvas 时拖动但拖动整个页面，而不仅仅是在 canvas.
内
我能做什么？
片段：
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
border-radius: 5px;
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
.tippy-content{
padding:0px;
}
.tooltipwrap{
display: flex;
flex-direction: row-reverse;
}
.tooltipinfo{
text-align: left;
padding: 0px 0px 15px 15px;
display: flex;
flex-direction: column;
}
.tooltipinfo h2{
margin-top: 15px;
margin-bottom: 0px;
font-weight: 800;
font-family: Panton;
font-size: 22px;
}
.tooltipinfo .sub{
color: #b0b0b0;
font-weight: 600;
}
.tooltipinfo .subbottom{
background-color:#439fdd;
display: inline-block;
position: relative;
color: #fff;
padding: 3px 5px;
border-radius: 5px;
width: max-content;
margin-top: 5px;
font-size: 18px;
}
.tooltipwrap img{
height: 220px;
width: 190px;
object-fit: cover;
border-radius: 0px 5px 5px 0px;
padding-left: 15px;
}
body{
margin: 0px;
}
.canvastip{
background-color: #009fe3;
border:3px solid #ccc;
}
.canvastip:hover{
background-color: #009fe3;
border: 3px solid #FFF;
border-radius: 18px;
box-shadow: 0 0 2px #888;
}
</style>
<img id="background" src="https://printzelf.nl/new/assets/images/custom/WOONKAMER.jpg" alt="" style="display:none;">
<div class="canvas-container" style="pointer-events: none;width: 100%; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="100%" height="500" class="lower-canvas" style="pointer-events: none;position: absolute; width: 100%; height: 500px; left: 0px; top: 0px;user-select: none;"></canvas>
</div>
<h2 style="margin-top:200px;">Test</h2>
<span id="cirkel1" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas1 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="assets/images/tooltipimg.png" alt="Gordijnen">
<div class="tooltipinfo">
<h2>Gordijnen</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel2" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas2 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/vitragegordijnen.jpg" alt="Vitragegordijnen">
<div class="tooltipinfo">
<h2>Vitrage gordijnen</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel3" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas3 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotoblok.jpg" alt="Fotoblok">
<div class="tooltipinfo">
<h2>Fotoblok</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel4" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas4 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotopaneel.jpg" alt="Fotopaneel">
<div class="tooltipinfo">
<h2>Fotopaneel</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel5" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas5 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/zitzak.jpg" alt="Zitzak">
<div class="tooltipinfo">
<h2>Zitzak</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel6" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas6 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/kussens.jpg" alt="Kussens">
<div class="tooltipinfo">
<h2>Kussens</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel7" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas7 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/tafelkleed.jpg" alt="Salontafelkleed">
<div class="tooltipinfo">
<h2>Salontafelkleed</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel8" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas8 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/hexagonfotocollage.jpg" alt="Hexagon collage">
<div class="tooltipinfo">
<h2>Hexagon Fotocollage</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel9" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas9 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/3dletters.jpg" alt="3D letters">
<div class="tooltipinfo">
<h2>3D Letters</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel10" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas10 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/tafelkleed2.jpg" alt="Tafelkleed 2">
<div class="tooltipinfo">
<h2>Tafelkleed</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel11" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas11 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/rolgordijn.jpg" alt="Rolgordijn">
<div class="tooltipinfo">
<h2>Rolgordijn</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel12" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas12 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/raamsticker.jpg" alt="Raamsticker">
<div class="tooltipinfo">
<h2>Raamsticker</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel13" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas13 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/textielwand.jpg" alt="Textielwand">
<div class="tooltipinfo">
<h2>Textielwand</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel14" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas14 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotoopplexiglas.jpg" alt="Foto op plexiglas">
<div class="tooltipinfo">
<h2>Foto op plexiglas</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel15" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas15 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotooprvs.jpg" alt="Foto op RVS">
<div class="tooltipinfo">
<h2>Foto op RVS</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
function reRender(){
var myImg = document.querySelector("#background");
var realWidth = window.innerWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({
allowTouchScrolling: true,
width: realWidth,
height: realHeight
});
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://printzelf.nl/new/assets/images/custom/WOONKAMER.jpg';
fabric.Object.NUM_FRACTION_DIGITS = 10;
fabric.Image.fromURL(source, function(img) {
img.scaleToWidth(canvas.width);
canvas.setBackgroundImage(img);
canvas.requestRenderAll();
});
var scaleToWidth = window.innerWidth / myImg.width;
// alert (scaleToWidth)
const hotspots = [{
top: (140* scaleToWidth),
left: (720* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 71,
imgleft: 236,
imgheight: 335,
imgwidth: 514,
placement: 'right',
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/gordijnen.jpg'
},
{
top: (160* scaleToWidth),
left: (640* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 82,
imgleft: 351,
imgheight: 313,
imgwidth: 337,
placement: 'right',
tooltipid: 'cirkel2',
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/voile.jpg'
},
{
top: (350* scaleToWidth),
left: (120* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel3',
hoverCursor: 'pointer',
selectable: false,
imgtop: 293,
imgleft: 21,
placement: 'right',
imgheight: 81,
imgwidth: 107,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotoblok.jpg'
},
{
top: (275* scaleToWidth),
left: (165* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel4',
hoverCursor: 'pointer',
selectable: false,
imgtop: 283,
imgleft: 127,
placement: 'right',
imgheight: 60,
imgwidth: 57,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotopaneel.jpg'
},
{
top: (430* scaleToWidth),
left: (600* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel5',
hoverCursor: 'pointer',
selectable: false,
imgtop: 365,
imgleft: 227,
placement: 'right',
imgheight: 185,
imgwidth: 396,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/zitzak.jpg'
},
{
top: (320* scaleToWidth),
left: (760* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel6',
hoverCursor: 'pointer',
selectable: false,
imgtop: 287,
imgleft: 785,
placement: 'left',
imgheight: 60,
imgwidth: 75,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/kussens.jpg'
},
{
top: (360* scaleToWidth),
left: (660* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel7',
hoverCursor: 'pointer',
selectable: false,
imgtop: 309,
imgleft: 554,
placement: 'right',
imgheight: 82,
imgwidth: 138,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/tafelkleed.jpg'
},
{
top: (200* scaleToWidth),
left: (970* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel8',
hoverCursor: 'pointer',
selectable: false,
imgtop: 162,
imgleft: 843,
placement: 'right',
imgheight: 102,
imgwidth: 129,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/hexagoncollage.jpg'
},
{
top: (140* scaleToWidth),
left: (1020* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel9',
hoverCursor: 'pointer',
selectable: false,
imgtop: 150,
imgleft: 1033,
placement: 'left',
imgheight: 81,
imgwidth: 121,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/3dletters.jpg'
},
{
top: (380* scaleToWidth),
left: (1290* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel10',
hoverCursor: 'pointer',
selectable: false,
imgtop: 331,
imgleft: 1288,
placement: 'left',
imgheight: 102,
imgwidth: 324,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/tafelkleed2.jpg'
},
{
top: (180* scaleToWidth),
left: (1795* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel11',
hoverCursor: 'pointer',
selectable: false,
imgtop: 55,
imgleft: 1807,
placement: 'left',
imgheight: 173,
imgwidth: 152,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/rolgordijn.jpg'
},
{
top: (278* scaleToWidth),
left: (1809* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel12',
hoverCursor: 'pointer',
selectable: false,
imgtop: 245,
imgleft: 1823,
placement: 'left',
imgheight: 173,
imgwidth: 152,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/raamsticker.jpg'
},
{
top: (200* scaleToWidth),
left: (1365* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel13',
hoverCursor: 'pointer',
selectable: false,
imgtop: 82,
imgleft: 1333,
placement: 'left',
imgheight: 331,
imgwidth: 468,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/textielwand.jpg'
},
{
top: (255* scaleToWidth),
left: (1165* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel14',
hoverCursor: 'pointer',
selectable: false,
imgtop: 156,
imgleft: 1165,
placement: 'left',
imgheight: 116,
imgwidth: 54,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotoopplexiglas.jpg'
},
{
top: (159* scaleToWidth),
left: (1219* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel15',
hoverCursor: 'pointer',
selectable: false,
imgtop: 164,
imgleft: 1215,
placement: 'left',
imgheight: 116,
imgwidth: 468,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotooprvs.jpg'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var btnWidth = 40,
btnHeight = 40;
function positionBtn(obj, index) {
var absCoords = canvas.getAbsoluteCoords(obj);
var element = document.getElementById('cirkel' + index);
element.style.left = (absCoords.left - btnWidth / 10) + 'px';
element.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
canvas.getObjects().forEach(function(ho, index) {
positionBtn(ho, index + 1);
});
$(".canvastip").each(function(i) {
tippy(this, {
theme: 'blue',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
// popperOptions: {
// strategy: 'fixed',
// modifiers: [
// {
// name: 'flip',
// options: {
// fallbackPlacements: ['bottom', 'bottom'],
// },
// },
// {
// name: 'preventOverflow',
// options: {
// altAxis: true,
// tether: false,
// },
// },
// ],
// },
onShow(instance) {
canvas.getObjects().forEach(function(ho, index) {
if (ho.class && ho.class === 'hotspot') {
if (instance.id == index + 1) {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft* scaleToWidth,
top: ho.imgtop* scaleToWidth,
scaleX: 1* scaleToWidth,
scaleY: 1* scaleToWidth,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default",
};
instance.setProps({placement: ho.placement})
var printzelfImg = new Image();
printzelfImg.onload = function(img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
printzelf.trippyHotspotImage = true;
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
for (const o of canvas.getObjects()) {
if (o.id && o.id === 'img-' + ho.name) {
o.visible = true;
break;
}
}
canvas.renderAll();
}
}
}
});
},
onHide(instance) {
for (const o of canvas.getObjects()) {
if (o.trippyHotspotImage) {
o.visible = false;
}
}
canvas.renderAll();
},
content: function(reference) {
return reference.querySelector('.tooltipcontentcanvas' + (i + 1));
}
});
});
}
window.addEventListener('resize', reRender, false);
reRender();
})();
</script>
</body>
</html>
它下面的 'test' 应该总是可见的，所以 dragging/scrolling 应该只出现在 canvas.
里面
我的 canvas 代码笔：https://codepen.io/twan2020/pen/mdOoGMz
我用下面的代码修复了它：
$('canvas').css('touch-action', 'manipulation');
(function(){
var defaultOnTouchStartHandler = fabric.Canvas.prototype._onTouchStart;
fabric.util.object.extend(fabric.Canvas.prototype, {
_onTouchStart: function(e) {
var target = this.findTarget(e);
// if allowTouchScrolling is enabled, no object was at the
// the touch position and we're not in drawing mode, then
// let the event skip the fabricjs canvas and do default
// behavior
if (this.allowTouchScrolling && !target && !this.isDrawingMode) {
// returning here should allow the event to propagate and be handled
// normally by the browser
return;
}
// otherwise call the default behavior
defaultOnTouchStartHandler.call(this, e);
}
});
})();
根据 fabric js github 页面，行：allowTouchScrolling: true 目前无法正常工作。
将上面的代码放在我的脚本标签的顶部（在 fabric 的初始化之上 canvas）修复了它。
我正在尝试创建一个比我的手机屏幕更宽的 canvas，用户可以左右拖动以查看 canvas 的其余部分。但由于某种原因，从 canvas.
内部拖动不起作用如果我在它下方（canvas 之外）页面可以左右拖动，但不能在canvas 内拖动。我该如何解决？
理想情况下，我只希望 canvas 内有一个滚动条，这样人们就可以在移动设备上左右拖动，同时不会增加整个页面的宽度。
我尝试在 canvas 上设置 overflow:scroll，但我仍然无法拖动它。我还添加了 pointer-events: none;，这允许在聚焦于 canvas 时拖动但拖动整个页面，而不仅仅是在 canvas.
我能做什么？
片段：
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
border-radius: 5px;
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
.tippy-content{
padding:0px;
}
.tooltipwrap{
display: flex;
flex-direction: row-reverse;
}
.tooltipinfo{
text-align: left;
padding: 0px 0px 15px 15px;
display: flex;
flex-direction: column;
}
.tooltipinfo h2{
margin-top: 15px;
margin-bottom: 0px;
font-weight: 800;
font-family: Panton;
font-size: 22px;
}
.tooltipinfo .sub{
color: #b0b0b0;
font-weight: 600;
}
.tooltipinfo .subbottom{
background-color:#439fdd;
display: inline-block;
position: relative;
color: #fff;
padding: 3px 5px;
border-radius: 5px;
width: max-content;
margin-top: 5px;
font-size: 18px;
}
.tooltipwrap img{
height: 220px;
width: 190px;
object-fit: cover;
border-radius: 0px 5px 5px 0px;
padding-left: 15px;
}
body{
margin: 0px;
}
.canvastip{
background-color: #009fe3;
border:3px solid #ccc;
}
.canvastip:hover{
background-color: #009fe3;
border: 3px solid #FFF;
border-radius: 18px;
box-shadow: 0 0 2px #888;
}
</style>
<img id="background" src="https://printzelf.nl/new/assets/images/custom/WOONKAMER.jpg" alt="" style="display:none;">
<div class="canvas-container" style="pointer-events: none;width: 100%; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="100%" height="500" class="lower-canvas" style="pointer-events: none;position: absolute; width: 100%; height: 500px; left: 0px; top: 0px;user-select: none;"></canvas>
</div>
<h2 style="margin-top:200px;">Test</h2>
<span id="cirkel1" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas1 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="assets/images/tooltipimg.png" alt="Gordijnen">
<div class="tooltipinfo">
<h2>Gordijnen</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel2" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas2 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/vitragegordijnen.jpg" alt="Vitragegordijnen">
<div class="tooltipinfo">
<h2>Vitrage gordijnen</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel3" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas3 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotoblok.jpg" alt="Fotoblok">
<div class="tooltipinfo">
<h2>Fotoblok</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel4" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas4 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotopaneel.jpg" alt="Fotopaneel">
<div class="tooltipinfo">
<h2>Fotopaneel</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel5" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas5 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/zitzak.jpg" alt="Zitzak">
<div class="tooltipinfo">
<h2>Zitzak</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel6" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas6 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/kussens.jpg" alt="Kussens">
<div class="tooltipinfo">
<h2>Kussens</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel7" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas7 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/tafelkleed.jpg" alt="Salontafelkleed">
<div class="tooltipinfo">
<h2>Salontafelkleed</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel8" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas8 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/hexagonfotocollage.jpg" alt="Hexagon collage">
<div class="tooltipinfo">
<h2>Hexagon Fotocollage</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel9" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas9 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/3dletters.jpg" alt="3D letters">
<div class="tooltipinfo">
<h2>3D Letters</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel10" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas10 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/tafelkleed2.jpg" alt="Tafelkleed 2">
<div class="tooltipinfo">
<h2>Tafelkleed</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel11" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas11 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/rolgordijn.jpg" alt="Rolgordijn">
<div class="tooltipinfo">
<h2>Rolgordijn</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel12" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas12 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/raamsticker.jpg" alt="Raamsticker">
<div class="tooltipinfo">
<h2>Raamsticker</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel13" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas13 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/textielwand.jpg" alt="Textielwand">
<div class="tooltipinfo">
<h2>Textielwand</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel14" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas14 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotoopplexiglas.jpg" alt="Foto op plexiglas">
<div class="tooltipinfo">
<h2>Foto op plexiglas</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<span id="cirkel15" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontentcanvas15 tooltipcontentcanvas darktext" style="position:relative;">
<div class="tooltipwrap">
<img src="cms/images/canvas/woonkamer/tooltip/fotooprvs.jpg" alt="Foto op RVS">
<div class="tooltipinfo">
<h2>Foto op RVS</h2>
<span class="sub">Print je eigen gordijnen.</span>
<span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
</div>
</div>
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
function reRender(){
var myImg = document.querySelector("#background");
var realWidth = window.innerWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({
allowTouchScrolling: true,
width: realWidth,
height: realHeight
});
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://printzelf.nl/new/assets/images/custom/WOONKAMER.jpg';
fabric.Object.NUM_FRACTION_DIGITS = 10;
fabric.Image.fromURL(source, function(img) {
img.scaleToWidth(canvas.width);
canvas.setBackgroundImage(img);
canvas.requestRenderAll();
});
var scaleToWidth = window.innerWidth / myImg.width;
// alert (scaleToWidth)
const hotspots = [{
top: (140* scaleToWidth),
left: (720* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 71,
imgleft: 236,
imgheight: 335,
imgwidth: 514,
placement: 'right',
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/gordijnen.jpg'
},
{
top: (160* scaleToWidth),
left: (640* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 82,
imgleft: 351,
imgheight: 313,
imgwidth: 337,
placement: 'right',
tooltipid: 'cirkel2',
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/voile.jpg'
},
{
top: (350* scaleToWidth),
left: (120* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel3',
hoverCursor: 'pointer',
selectable: false,
imgtop: 293,
imgleft: 21,
placement: 'right',
imgheight: 81,
imgwidth: 107,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotoblok.jpg'
},
{
top: (275* scaleToWidth),
left: (165* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel4',
hoverCursor: 'pointer',
selectable: false,
imgtop: 283,
imgleft: 127,
placement: 'right',
imgheight: 60,
imgwidth: 57,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotopaneel.jpg'
},
{
top: (430* scaleToWidth),
left: (600* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel5',
hoverCursor: 'pointer',
selectable: false,
imgtop: 365,
imgleft: 227,
placement: 'right',
imgheight: 185,
imgwidth: 396,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/zitzak.jpg'
},
{
top: (320* scaleToWidth),
left: (760* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel6',
hoverCursor: 'pointer',
selectable: false,
imgtop: 287,
imgleft: 785,
placement: 'left',
imgheight: 60,
imgwidth: 75,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/kussens.jpg'
},
{
top: (360* scaleToWidth),
left: (660* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel7',
hoverCursor: 'pointer',
selectable: false,
imgtop: 309,
imgleft: 554,
placement: 'right',
imgheight: 82,
imgwidth: 138,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/tafelkleed.jpg'
},
{
top: (200* scaleToWidth),
left: (970* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel8',
hoverCursor: 'pointer',
selectable: false,
imgtop: 162,
imgleft: 843,
placement: 'right',
imgheight: 102,
imgwidth: 129,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/hexagoncollage.jpg'
},
{
top: (140* scaleToWidth),
left: (1020* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel9',
hoverCursor: 'pointer',
selectable: false,
imgtop: 150,
imgleft: 1033,
placement: 'left',
imgheight: 81,
imgwidth: 121,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/3dletters.jpg'
},
{
top: (380* scaleToWidth),
left: (1290* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel10',
hoverCursor: 'pointer',
selectable: false,
imgtop: 331,
imgleft: 1288,
placement: 'left',
imgheight: 102,
imgwidth: 324,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/tafelkleed2.jpg'
},
{
top: (180* scaleToWidth),
left: (1795* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel11',
hoverCursor: 'pointer',
selectable: false,
imgtop: 55,
imgleft: 1807,
placement: 'left',
imgheight: 173,
imgwidth: 152,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/rolgordijn.jpg'
},
{
top: (278* scaleToWidth),
left: (1809* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel12',
hoverCursor: 'pointer',
selectable: false,
imgtop: 245,
imgleft: 1823,
placement: 'left',
imgheight: 173,
imgwidth: 152,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/raamsticker.jpg'
},
{
top: (200* scaleToWidth),
left: (1365* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel13',
hoverCursor: 'pointer',
selectable: false,
imgtop: 82,
imgleft: 1333,
placement: 'left',
imgheight: 331,
imgwidth: 468,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/textielwand.jpg'
},
{
top: (255* scaleToWidth),
left: (1165* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel14',
hoverCursor: 'pointer',
selectable: false,
imgtop: 156,
imgleft: 1165,
placement: 'left',
imgheight: 116,
imgwidth: 54,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotoopplexiglas.jpg'
},
{
top: (159* scaleToWidth),
left: (1219* scaleToWidth),
radius: 10,
fill: '#009fe3',
id: 'cirkel15',
hoverCursor: 'pointer',
selectable: false,
imgtop: 164,
imgleft: 1215,
placement: 'left',
imgheight: 116,
imgwidth: 468,
imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotooprvs.jpg'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var btnWidth = 40,
btnHeight = 40;
function positionBtn(obj, index) {
var absCoords = canvas.getAbsoluteCoords(obj);
var element = document.getElementById('cirkel' + index);
element.style.left = (absCoords.left - btnWidth / 10) + 'px';
element.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
canvas.getObjects().forEach(function(ho, index) {
positionBtn(ho, index + 1);
});
$(".canvastip").each(function(i) {
tippy(this, {
theme: 'blue',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
// popperOptions: {
// strategy: 'fixed',
// modifiers: [
// {
// name: 'flip',
// options: {
// fallbackPlacements: ['bottom', 'bottom'],
// },
// },
// {
// name: 'preventOverflow',
// options: {
// altAxis: true,
// tether: false,
// },
// },
// ],
// },
onShow(instance) {
canvas.getObjects().forEach(function(ho, index) {
if (ho.class && ho.class === 'hotspot') {
if (instance.id == index + 1) {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft* scaleToWidth,
top: ho.imgtop* scaleToWidth,
scaleX: 1* scaleToWidth,
scaleY: 1* scaleToWidth,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default",
};
instance.setProps({placement: ho.placement})
var printzelfImg = new Image();
printzelfImg.onload = function(img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
printzelf.trippyHotspotImage = true;
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
for (const o of canvas.getObjects()) {
if (o.id && o.id === 'img-' + ho.name) {
o.visible = true;
break;
}
}
canvas.renderAll();
}
}
}
});
},
onHide(instance) {
for (const o of canvas.getObjects()) {
if (o.trippyHotspotImage) {
o.visible = false;
}
}
canvas.renderAll();
},
content: function(reference) {
return reference.querySelector('.tooltipcontentcanvas' + (i + 1));
}
});
});
}
window.addEventListener('resize', reRender, false);
reRender();
})();
</script>
</body>
</html>
它下面的 'test' 应该总是可见的，所以 dragging/scrolling 应该只出现在 canvas.
里面我的 canvas 代码笔：https://codepen.io/twan2020/pen/mdOoGMz
我用下面的代码修复了它：
$('canvas').css('touch-action', 'manipulation');
(function(){
var defaultOnTouchStartHandler = fabric.Canvas.prototype._onTouchStart;
fabric.util.object.extend(fabric.Canvas.prototype, {
_onTouchStart: function(e) {
var target = this.findTarget(e);
// if allowTouchScrolling is enabled, no object was at the
// the touch position and we're not in drawing mode, then
// let the event skip the fabricjs canvas and do default
// behavior
if (this.allowTouchScrolling && !target && !this.isDrawingMode) {
// returning here should allow the event to propagate and be handled
// normally by the browser
return;
}
// otherwise call the default behavior
defaultOnTouchStartHandler.call(this, e);
}
});
})();
根据 fabric js github 页面，行：allowTouchScrolling: true 目前无法正常工作。
将上面的代码放在我的脚本标签的顶部（在 fabric 的初始化之上 canvas）修复了它。