backbone.konvaview

    0.9.5 • Public • Published

    backbone.konvaview

    Special Backbone View for canvas via KonvaJS library.

    Build Status

    Example Live preview:

        var MyView = Backbone.KonvaView.extend({
          // build KonvaJS object, then return it.
          initialize : function(params) {
            this.layer = params.layer;
          },
          el : function(){
            var rect = new Konva.Rect({
              x : 100,
              y : 100,
              width : 50,
              height : 50,
              fill : 'green',
              id : 'rect'
            });
            var circle = new Konva.Circle({
              x : 200,
              y : 100,
              radius : 50,
              fill : 'red',
              name : 'circle'
            });
            var group = new Konva.Group();
            group.add(rect).add(circle);
            return group;
          },
          // setup events
          events : {
            'click #rect' : function(){
              console.log("on rectangle clicked");
            },
            'mouseover .circle' : 'onMouseOverCircle'
          },
          onMouseOverCircle : function(){
            console.log('Mouse is over circle');
          },
          render : function(){
            // this.el - cached KonvaJS object.
            this.layer.add(this.el);
            this.layer.draw();
          }
        });
     
        var stage = new Konva.Stage({
          container : 'container',
          width : 300,
          height : 300
        });
        var layer = new Konva.Layer();
        stage.add(layer);
     
        view = new MyView({layer:layer});
        view.render();

    Install

    npm i backbone.konvaview

    DownloadsWeekly Downloads

    0

    Version

    0.9.5

    License

    MIT

    Last publish

    Collaborators

    • lavrton