npm

Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »

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

1

version

0.9.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability