5

我想编写一个简单地在屏幕上放置一个矩形的应用程序。但是我需要为此结合 kinetic.js 和backbone.js，我不确定它是否可以完成。动力学代码为：

 document.getElementById('rect').addEventListener('click', function() {
    rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50,25],
    draggable: true,
  });

和主干代码

$(function() {
var Shape = Backbone.Model.extend({
defaults: { x:50, y:50, width:150, height:150, color:'gray' },
setTopLeft: function(x,y) { this.set({ x:x, y:y }); },
setDim: function(w,h) { this.set({ width:w, height:h }); },
isCircle: function() { return !!this.get('circle'); }
});

*我在这些路径中添加了 .html 文件

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>

我只想在主干中放置动力学部分而不是默认值。可能吗？

4

2 回答 2

6

在您的帮助下，我们编写了这个工作示例，它使用 kinetic.js 和backbone.js 在屏幕上放置了一个矩形。我希望它对正在寻找这种集成代码的人有用。非常感谢你的帮助！

var KineticModel = Backbone.Model.extend({
    myRect: null,

    createRect : function() {
            alert("rectangle created.");
            var rect=new Kinetic.Rect({
                            x: 10,
                            y: 10,
                            width: 100,
                            height: 50,
                            fill: 'green',
                            stroke: 'black',
                            strokeWidth: 1,
                            offset: [0, 0],
                            draggable: true,
                      });
            return rect;
        }
});

var KineticView = Backbone.View.extend({
        tagName: 'span',
        stage: null,
        layer: null,

        initialize: function (options) {
            model: options.model;
            el: options.el;
            this.layer = new Kinetic.Layer();
            this.stage = new Kinetic.Stage({ container: this.el, width: 400, height: 400 });
            this.stage.add(this.layer);
        },
        events: {
            'click': 'spanClicked'
        },
        render: function () {
            var rect = this.model.createRect();
            this.layer.add(rect);
            this.stage.add(this.layer);
            alert("render");
        },
        spanClicked: function () {

        }
});

    var kModel = new KineticModel({});
    var kView = new KineticView({ el: '#container', model: kModel });

    $('#shapetest').click(function() {
        kView.render();
    });
于 2013-03-19T19:16:06.837 回答
4

是的，这绝对是可能的。我将创建一个模型来存储您将在形状中使用的数据，使用视图通过单击我来呈现跨度标记，将事件侦听器附加到跨度，然后在用户单击时输出矩形。

var ShapeModel = Backbone.Model.extend({});
    var rectangle = new ShapeModel({
        x: 10,
        y: 10,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        offset: [0, 0],
        draggable: true,
    });
    var RectangleView = Backbone.View.extend({
        tagName: 'span',
        initialize: function (options) {
            model: options.model;
            el: options.el;
        },
        events: {
            'click': 'spanClicked'
        },
        render: function () {
            this.$el.text('click me');
        },
        spanClicked: function () {
            var stage = new Kinetic.Stage({
                container: this.el,
                width: 200,
                height: 200                    
            });
            var layer = new Kinetic.Layer();
            var rect = new Kinetic.Rect(this.model.toJSON());
            layer.add(rect);
            stage.add(layer);
        }
    });
    var rectangleView = new RectangleView({ el: '#shapetest', model: rectangle });
    rectangleView.render();

我也会升级到最新版本的 Backbone 和 Underscore。

另外，感谢您指出 Kinetic。希望它支持在移动设备上的画布上绘图。

于 2013-03-17T01:23:41.930 回答