0

我正在尝试创建一个小 jQueryUI 插件，允许用户在div#canvas. 该插件扩展ui.mouse并负责附加一个助手，以可视化绘制矩形的过程，但它实际上并没有渲染它。

相反，它应该返回一个boxProperties对象，但我无法做到这一点。我对 IIFE 还很陌生，还没有完全掌握闭包，但我怀疑解决方案就在那里。我已经尝试了一些东西，但由于缺乏适当的知识而无法实现任何目标。

问题是div#canvas （绘制矩形的地方），实际上是 aMarionette.CollectionView并且矩形本身将被Marionette.ItemView动态添加到 collectionview 中，一旦绘制它们就会呈现它们。

我应该在我的代码中添加什么，以便在绘制矩形后立即返回一个 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 插件boxMaker。

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

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

  },

然后我添加我的事件

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

因为我在计算东西，所以我有一个函数itemViewOptions，它返回boxProperties对象

  itemViewOptions: function() {
    return boxProperties;
  }

最后但并非最不重要的一点是我有我的绘图处理程序，它负责使用 boxProperties 创建一个 Rectangle 模型的实例，并将其添加到集合中（负责附加它）

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