0

私が持っている小さな問題...

500 x 250 のラクタングルを想像してみてください (簡単なビット)。

長方形内には幅全体に線が入っています。

ユーザーがこの線を長方形内で上下にドラッグできるようにしたいと思います。(jqueryui ドラッグ可能で非常に簡単に実行できます)

また、ユーザーが線をクリックして分割し、2 つの線を作成できるようにしたいと考えています (ここで行き詰まっています)。2 本の線を再び結合する方法もあります。

これをどこから始めるべきか、どこを見ればよいか、またはこれを可能にする適切なプラグインについてのアイデアはありませんか?

ありがとうマット

4

1 に答える 1

0

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();
});
于 2013-06-06T11:15:24.510 に答える