创建一个类似div的元素，该元素的溢出设置为使用HTML Canvas自动

Question

标题可能会引起误解，但这是我总结问题所能得出的最好结果。

无论如何，我需要弄清楚如何制作一个列表或一个容器，在这种情况下，是一个包含项目列表的纯矩形，可以将其上下拖动以显示容器中的其他项目。 从某种意义上讲，它类似于带有滑块的约束div，但没有滑块。

现在，我有了一个使用KonvaJS（以前的KineticJS）将所有项目放入容器中并使其在特定方向上可拖动的想法，等等。

但是要注意的是，元素的上下滑动不仅应在拖动时进行，而且还应在轻拂时进行。 因此，如果您向上滑动手指/鼠标，列表会一直滑动，直到最后，速度会根据滑动强度而变化。 如果确定轻拂强度或速度太复杂，则只需将任何类型的轻拂都将整个列表滑到底部或顶部即可。

因此，这应该类似于您在android或ios上具有的标准垂直幻灯片小部件。 现在您对我如何进行此操作或您将如何处理有任何想法。 任何想法都欢迎。

Answer 1

我猜想，当您谈论“轻拂”时，您实际上是指“滚动”。
编辑：错过了问题的重点，也错过了[konvajs]标签。 但是，这是一种无需任何库即可完成此操作的方法，希望它可以帮助某人以这种方式进入。

最简单的想法是制作两个对象，一个容器和一个内容，每个对象都带有一个画布。

在mouse's wheel事件上，更新内容位置，然后将其画布重新绘制到容器的画布上；或者，如果需要处理拖动，请侦听mousemove事件，将dragging标志设置为true，然后在mouseup上将其删除。 在mousemove ，通过检查上一个事件的时间戳和新事件的时间戳计算移动速度后，更新位置。 然后在mouseup启动一个动画，该动画将降低您的移动速度：

 // our container object var container = { width: window.innerWidth - 2, height: window.innerHeight - 2, top: 0, left: 0, canvas: document.getElementById('container'), isOver: function(x, y) { return (x >= this.left && x <= this.left + this.width && y >= this.top && y <= this.top + this.height); }, }; // our content object var content = { width: container.width * 2, height: container.height * 2, top: 0, left: 0, background: 'rgba(0,255,0,.5)', canvas: document.createElement('canvas'), // set an init function to draw the texts init: function() { var ctx = this.ctx; ctx.font = '20px sans-serif'; ctx.textBaseline = 'top'; ctx.fillText('Hello World', 0, 0); ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.fillText('Middle world', this.width / 2, this.height / 2); ctx.textBaseline = 'bottom'; ctx.textAlign = 'left'; var textLength = ctx.measureText('Bye World').width; ctx.fillText('Bye World', this.canvas.width - textLength, this.canvas.height); ctx.fillStyle = this.background; ctx.fillRect(0, 0, this.width, this.height); }, }; // init the objects var init = function(obj) { var c = obj.canvas; obj.ctx = c.getContext('2d'); c.width = obj.width; c.height = obj.height; if (obj.init) { obj.init(); } } // our drawing function var draw = function() { container.ctx.clearRect(0, 0, container.width, container.height); container.ctx.drawImage(content.canvas, content.left, content.top); }; // update the content position container.update = function(x, y) { // if the content is smaller, we don't need to scroll if (content.width > container.width) { var maxX = Math.max(container.width, content.width); var minX = Math.min(container.width, content.width); content.left -= x; // if we are at one end if (content.left < minX - maxX) { content.left = minX - maxX; } // or another else if (content.left > 0) { content.left = 0; } } if (content.height > container.height) { var maxY = Math.max(container.height, content.height); var minY = Math.min(container.height, content.height); content.top -= y; if (content.top < minY - maxY) { content.top = minY - maxY; } else if (content.top > 0) { content.top = 0; } } }; var drag = { friction: .1, sensibility: 18, minSpeed: .01, }; var mouseMove_Handler = function(e) { // we're not dragging anything, stop here if (!drag.dragged) { return; } var rect = this.getBoundingClientRect(); var posX = e.clientX - rect.left; var posY = e.clientY - rect.top; // how long did it take since last event var deltaTime = (e.timeStamp - drag.lastDragTime) / drag.sensibility; // our moving speed var deltaX = (drag.lastDragX - posX) / deltaTime; var deltaY = (drag.lastDragY - posY) / deltaTime; // update the drag object drag.lastDragX = posX; drag.lastDragY = posY; drag.lastDeltaX = deltaX; drag.lastDeltaY = deltaY; drag.lastDragTime = e.timeStamp; // update the container obj drag.dragged.update(deltaX, deltaY); // redraw draw(); }; var mouseDown_Handler = function(e) { // if we are sliding, stop it if (drag.sliding) { cancelAnimationFrame(drag.sliding); drag.sliding = null; } var rect = this.getBoundingClientRect(); var posX = e.clientX - rect.left; var posY = e.clientY - rect.top; // first check that the event occurred on top of our container object // we could loop through multiple ones if (container.isOver(posX, posY)) { // init our drag object drag.dragged = container; drag.lastDragX = posX; drag.lastDragY = posY; drag.lastDragTime = e.timeStamp; } }; var mouseUp_Handler = function(e) { // store a ref of which object we were moving var container = drag.dragged; // we're not dragging anymore drag.dragged = false; var slide = function() { // decrease the speed drag.lastDeltaX /= 1 + drag.friction; drag.lastDeltaY /= 1 + drag.friction; // check that we are still out of our minimum speed if (drag.lastDeltaX > drag.minSpeed || drag.lastDeltaY > drag.minSpeed || drag.lastDeltaX < -drag.minSpeed || drag.lastDeltaY < -drag.minSpeed) { // store a reference of the animation drag.sliding = requestAnimationFrame(slide); } else { drag.sliding = null; drag.lastDeltaX = drag.lastDeltaY = 0; } container.update(drag.lastDeltaX, drag.lastDeltaY); draw(); }; slide(); }; // add the wheel listener, for a polyfill check the MDN page : // https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser var mouseWheel_Handler = function(e) { // get the position of our canvas element var rect = this.getBoundingClientRect(); var posX = e.clientX - rect.left; var posY = e.clientY - rect.top; // first check that the event occurred on top of our container object if (container.isOver(posX, posY)) { // tell the browser we handle it e.preventDefault(); e.stopPropagation(); // send the event's deltas container.update(e.deltaX, e.deltaY); // redraw draw(); } }; container.canvas.addEventListener('mousedown', mouseDown_Handler); container.canvas.addEventListener('mousemove', mouseMove_Handler); container.canvas.addEventListener('mouseup', mouseUp_Handler); container.canvas.addEventListener('mouseleave', mouseUp_Handler); container.canvas.addEventListener('wheel', mouseWheel_Handler); // init the objects init(container); init(content); // make a first draw draw(); // Snippet only preventions \\\\ // avoid the outer window to scroll window.onscroll = function(e) { e.preventDefault(); e.stopPropagation() }; // if you go in full page view window.onresize = function() { container.width = window.innerWidth; container.height = window.innerHeight; content.width = container.width * 2; content.height = container.height * 2; init(container); init(content); draw(); }; 

 body,html,canvas { margin: 0; display: block } canvas { border: 1px solid; } 

 <canvas id="container"></canvas> 

Answer 2

工作演示： http : //jsbin.com/gefuvu/edit?js，输出

draggable属性已经支持常规拖放。 为了将拖放限制为垂直滚动，我使用以下简单的dragBound：

const group = new Konva.Group({
  draggable: true,
  dragBoundFunc: (pos) => {
    const minY = -group.getClientRect().height + stage.height();
    const maxY = 0;
    const y = Math.max(Math.min(pos.y, maxY), minY);

    return {y, x: 0}
  }
});

“轻拂”实现：

// setup flick
let lastY = null;
let dY = 0;
group.on('dragstart', () => {
  lastY = group.y();
  dy = 0;
});
group.on('dragmove', () => {
    dy = lastY - group.y();
    lastY = group.y();
});
group.on('dragend', () => {
    // if last move is far way it means user move pointer very fast
    // for this case we need to automatically "scroll" group
    if (dy > 5) {
        group.to({
          y: -group.getClientRect().height + stage.height()
        });
    }
    if (dy < -5) {
        group.to({
          y: 0
        });
    }
});