Jquery/HTML5？可能是画布？线操纵

Question

一个小问题，我有...

试想一个ractangle说，500×250（易位）

在矩形有一行进行的跨整个宽度。

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

我还希望用户能够点击该行来分割它，然后有两行（这是我被卡住的地方）。还有一种将两条线重新结合在一起的方法。

我真的不知道从哪里开始，对于我应该在哪里寻找的任何想法，或者一个合适的插件允许这样做？

感谢 马特

Answer 1

我已经使用HTML5画布和KineticJS框架作出了example。

开始的时候，只有一条水平线，点击一下后，剩下两条线，正好分开用户点击的地方。

下面是代码：

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