如何使fabricJS画布在移动设备上可水平拖动？
Posted
技术标签:
【中文标题】如何使fabricJS画布在移动设备上可水平拖动？【英文标题】：How to make a fabricJS canvas draggable horizontally on mobile? 【发布时间】：2021-06-08 11:38:39 【问题描述】：我正在尝试创建一个比我的手机屏幕更宽的画布，用户可以左右拖动以查看画布的其余部分。但由于某种原因，从画布内部无法拖动。
如果我在它下方（画布外），页面可以左右拖动，但不能在画布内拖动。我该如何解决？
理想情况下，我只需要画布内的滚动条，以便人们可以在移动设备上左右拖动，同时不会增加整个页面的宽度。
我尝试在画布上设置overflow:scroll，但我仍然无法拖动它。我还添加了pointer-events: none;，这允许在聚焦于画布时进行拖动，但会拖动整个页面，而不仅仅是在画布内。
我能做什么？
片段：
<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" style="display:none;">
<div class="canvas-container" style="pointer-events: none;width: 100%; height: 500px; position: relative; user-select: none;">
<canvas id="c" 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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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>它下面的“测试”应该始终可见，因此拖动/滚动应该只发生在画布内。
我画布的代码笔：https://codepen.io/twan2020/pen/mdOoGMz
【问题讨论】：
【参考方案1】：我用以下代码修复了它：
$('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这一行目前不起作用。
将上面的代码放在我的脚本标签的顶部（在织物画布的初始化之上）修复了它。
【讨论】：
以上是关于如何使fabricJS画布在移动设备上可水平拖动？的主要内容，如果未能解决你的问题，请参考以下文章