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();

バックボーンとアンダースコアの最新バージョンにもアップグレードします。

また、キネティックを指摘していただきありがとうございます。うまくいけば、モバイルデバイスのキャンバスに描画するためのサポートがあります。

于 2013-03-17T01:23:41.930 に答える