HTML5 Canvas と KineticJS フレームワークを使用して例を作成しました。
最初は水平線が 1 本しかなく、1 回クリックすると 2 本の線が残り、ユーザーがクリックした場所で正確に分割されます。
コードは次のとおりです。
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();
});