I am trying to create a canvas that is wider than my mobile screen, users can drag right and left to see the rest of the canvas. But for some reason dragging does not work from inside the canvas.
If I below it (outside the canvas) the page can be dragged left and right, but not inside the canvas. How can I fix that?
Ideally I just want a scrollbar inside the canvas so people can drag left and right on mobile, whilst it doesn't increase the entire page width.
I tried setting overflow:scroll on the canvas but I still couldn't drag it. I also added pointer-events: none;, this allows dragging while focused in the canvas but drags the whole page, not just inside the canvas.
What can I do?
Snippet:
<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>The 'test' beneath it should always be visible, so dragging/scrolling should only happen inside the canvas.
Codepen of my canvas: https://codepen.io/twan2020/pen/mdOoGMz
from How to make a fabricJS canvas draggable horizontally on mobile?
No comments:
Post a Comment