Question

我正在尝试创建一个小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);

Answer 1

最后我使用了jQuery-UI _trigger method

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

所以每当调用_mouseStop方法时，我们都会删除辅助矩形，并触发"stoppedDrawing"类型的事件并传递boxProperties。请注意，完整事件类型为"boxmakerstoppeddrawing"，因为我已将我的jquery-ui插件命名为boxMaker。

现在回到我的Marionette.CollectionView我初始化视图

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

  },

然后我添加我的活动

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

由于我正在计算我的itemViewOptions上的函数，因此返回boxProperties对象

  itemViewOptions: function() {
    return boxProperties;
  }

最后但并非最不重要的是，我有了drawingHandler，它负责使用boxProperties创建Rectangle模型的实例，并将其添加到集合中（负责附加它）

  drawingHandler: function() {
    var rectangle = new Rectangle();
    this.collection.add(rectangle);
  }

创建一个jQuery UI插件：IIFE＆amp;返回对象

1 个答案: