jquery - jQuery / HTML5？可能是帆布？线路操作

Question

我有一个小问题...

想象一个 ractangle 说 500 x 250。（简单一点）

在矩形内有一条横跨整个宽度的线。

我希望用户能够在矩形内上下拖动这条线。（可以很容易地用 jqueryui 可拖动完成）

我还希望用户能够单击该行将其拆分，然后有两行（这是我卡住的地方）。也是一种将两条线重新连接在一起的方法。

我真的没有从哪里开始，关于我应该在哪里寻找的任何想法，或者允许这样做的合适插件？

谢谢马特

Answer 1

我使用 HTML5 Canvas 和 KineticJS 框架做了一个例子。

一开始，只有一条水平线，单击一次后，还剩下两条线，正好在用户单击的位置分开。

这是代码：

var stage = new Kinetic.Stage({
    container: 'container'
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 500,
    height: 250,
    fill: 'red'
});
layer.add(rect);

var line = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 500,
    height: 2,
    fill: 'black',
    draggable: true,
    dragBoundFunc: function (pos) {
        return {
            x: this.getAbsolutePosition().x,
            y: pos.y
        };
    }
});
layer.add(line);
stage.add(layer);
stage.draw();

line.on('click', function(e){
    var y = line.getY();
    line.destroy();
    var line1 = new Kinetic.Rect({
        x: 0,
        y: y,
        width: e.x,
        height: 2,
        fill: 'black',
        draggable: true,
        dragBoundFunc: function (pos) {
            return {
                x: this.getAbsolutePosition().x,
                y: pos.y
            };
        }
    });

    var line2 = new Kinetic.Rect({
        x: e.x,
        y: y,
        width: stage.getWidth()-e.x,
        height: 2,
        fill: 'black',
        draggable: true,
        dragBoundFunc: function (pos) {
            return {
                x: this.getAbsolutePosition().x,
                y: pos.y
            };
        }
    });
    layer.add(line1);
    layer.add(line2);
    stage.add(layer);
    stage.draw();
});