使用HTML Canvas创建一个类似div的元素，其溢出设置为auto [英] Create a div like element that has overflow set to auto using HTML Canvas

问题描述

标题可能会误导，但这是我能提出的最好的我的问题的总结。

The title might be misleading but that is the best I could come up with for a summary of my question.

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

Anyways, I need to figure out how to make a list, or a container, in this case a plain rectangle that contains a list of items, which can be dragged up and down in order to reveal other items in the container. In a way it would resemble a constrained div with a slider bar, but without the slider.

现在，我有一个想法，使用KonvaJS，前KineticJS将容器中的所有项目放在一个组，并使组可以在某些方向等。

Now, I have an idea on using KonvaJS, former KineticJS to put all the items in the container in a group, and make the group draggable in certain directions, etc.

然而，抓住的是，元素顶部或底部的滑动不应该只是拖动，而是轻拂也。因此，如果你向上滑动手指/鼠标，列表将继续滑动，直到结束，其中速度将根据轻弹强度变化。如果确定轻弹强度或速度太复杂，则任何类型的轻弹都需要将整个列表滑动到底部或顶部。

However the catch is that the sliding of the elements top or down should not only be on drag, but on flick also. So if you kind of flick your finger/mouse upwards the list would keep sliding by, until the end, where the speed would vary based on the flick intensity. If determining the flick intensity or speed is too complicated, then just any type of flick would need to slide the whole list to the bottom, or top.

因此，这应该类似于你在Android或ios上的标准垂直幻灯片小部件。现在你有什么想法如何继续这一点，或你将如何去做这个。欢迎任何想法。

So this should kind of resemble the standard vertical slide widgets you have on your android or ios. Now do you have any ideas on how I can proceed with this, or how would you go about this. Any ideas are welcome.

推荐答案

工作演示： http://jsbin.com/gefuvu/edit?js,output

通常的拖放已经由 draggable 属性支持。对于限制拖放到垂直滚动我使用这个简单的dragBound：

Usual drag and drop is already supported by draggable property. For limit drag&drop to vertical scrolling I am using this simple 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}
  }
});

Flick实施：

// 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
        });
    }
});

这篇关于使用HTML Canvas创建一个类似div的元素，其溢出设置为auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！