我想编写一个只在屏幕上放置一个矩形的应用程序。但是我需要为此结合 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,
  });

和 Backbone 代码

$(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>

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

最佳答案

在您的帮助下，我们编写了这个工作示例，它使用 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();
    });

关于javascript - 是否可以结合 kinetic.js 和 backbone.js？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15444114/