0

ユーザーが長方形を描画できるようにする小さなjQueryUIプラグインを作成しようとしていますdiv#canvas。プラグインはui.mouse、ヘルパーの追加を拡張して処理し、長方形を描画するプロセスを視覚化しますが、実際にはレンダリングしません。

代わりに、オブジェクトを返す必要がありboxPropertiesますが、それができませんでした。私はIIFEにかなり慣れていないため、閉鎖を完全に把握していませんが、解決策はどこかにあると思います。私はいくつかのことを試しましたが、適切な知識がなければ何も達成できませんでした。

キャッチは、div#canvas （長方形が描画される場所）が実際には でMarionette.CollectionViewあり、長方形自体がMarionette.ItemViewコレクションビューに動的に追加され、描画されるとすぐにレンダリングされることです。

四角形が描画されるとすぐに boxProperties オブジェクトが返され、それを四角形の ItemView に渡してレンダリングできるようにするには、コードに何を追加すればよいですか?

これが私のプラグインコードです

(function($, undefined){
    $.widget('nc.boxMaker', $.ui.mouse, {
        version: '0.0.1',

        options: {
            distance: 60
        },

        _create: function() {
            el = this.element;
            screenOffset = el.offset();
            screenOffset.left = Math.round(screenOffset.left);
            screenOffset.top = Math.round(screenOffset.top);
            this._mouseInit();
        },

        _mouseStart: function(event) {
            this.coords = [event.pageX - screenOffset.left, event.pageY - screenOffset.top];
            this.boxHelper = $(document.createElement('div'));

            this.boxHelper.css({
                "border":'1px dotted black',
                "z-index": 100,
                "position": "absolute",
                "left": this.coords[0],
                "top": this.coords[1],
                "width": 10,
                "height": 10
            });
            el.append(this.boxHelper);
        },

        _mouseDrag: function(event) {
            var x1 = this.coords[0], y1 = this.coords[1], 
                x2 = event.pageX - screenOffset.left, y2 = event.pageY - screenOffset.top;
            if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
            if (y1 > y2) { var tmp1 = y2; y2 = y1; y1 = tmp1; }
            boxProperties = {left: x1, top: y1, width: x2-x1, height: y2-y1};
            this.boxHelper.css(boxProperties);
        },

        _mouseStop: function(event) {
            this.boxHelper.remove();
            return boxProperties;
        }

    });

})(jQuery);
4

1 に答える 1

0

最後にjQuery-UI_triggerメソッドを使用しました

    _mouseStop: function(event) {
        this.boxHelper.remove();
        console.log("about to trigger view event!")
        this._trigger("stoppedDrawing", event, boxProperties);
    }

したがって、_mouseStop メソッドが呼び出されるたびに、ヘルパー四角形を削除し、タイプのイベントをトリガーし"stoppedDrawing"、boxProperties. "boxmakerstoppeddrawing"jquery-ui plugin という名前を付けたので、完全なイベント タイプになることに注意してくださいboxMaker。

Marionette.CollectionView に戻り、ビューを初期化します

  initialize: function() {
    this.$el.boxMaker(); 

  },

そして、イベントを追加します

  events: {
    'boxmakerstoppeddrawing' : 'drawingHandler'
  },

私はものを計算しているので、オブジェクトitemViewOptionsを返す関数がありますboxProperties

  itemViewOptions: function() {
    return boxProperties;
  }

最後になりましたが、boxProperties を使用して Rectangle モデルのインスタンスを作成し、それをコレクションに追加する (追加を処理する) 処理を行う drawingHandler があります。

  drawingHandler: function() {
    var rectangle = new Rectangle();
    this.collection.add(rectangle);
  }
于 2013-11-25T11:03:41.997 に答える