CODEWITHSUNDEEP
ember.jspaperjs
nite
nite

Reputation: 783

Paper.js with Ember.js

Has anyone been able to get paper.js working with ember.js? I am new to both libraries and have not been able to get things to work. When I refer to the 'paper' object I get an error: 'paper' is not defined.

Any help would be much appreciated!!

-nt

Upvotes: 2

Views: 659

Answers (1)

melc
melc

Reputation: 11671

This is an example of using paper.js along with ember.js. When clicking an event is sent to an ember view from the paperjs event handling code, which populates an array of the corresponding controller, which is bound to the template and renders it on the output.

http://emberjs.jsbin.com/vunegose/1

http://emberjs.jsbin.com/vunegose/1/edit

js

function getView($el){
  return Ember.View.views[$el.closest(".ember-view").attr("id")];
}


App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexController = Ember.Controller.extend({
  entries:[]
});

App.IndexView = Ember.View.extend({
  actions:{
    testAction:function(){

      this.get("controller.entries").pushObject("now:"+Date.now());
    }

  }
});

hbs

<script type="text/x-handlebars">
    <h2> Welcome to Ember.js with paper.js example</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <div class="canvas">
<canvas resize="true" id="canvas-1"></canvas>
</div>

<div class="output">
<b>output:</b>
{{#each entry in entries}}
<p>{{entry}}</p>
{{/each}}
</div>

  </script>

paperscript (from http://paperjs.org/examples/chain/)

<script type="text/paperscript" canvas="canvas-1">
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html

// The amount of points in the path:
var points = 25;

// The distance between the points:
var length = 35;

var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round'
});

var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
    path.add(start + new Point(i * length, 0));

function onMouseMove(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
        var segment = path.segments[i];
        var nextSegment = segment.next;
        var vector = segment.point - nextSegment.point;
        vector.length = length;
        nextSegment.point = segment.point - vector;
    }
    path.smooth();
}

function onMouseDown(event) {
    path.fullySelected = true;
    path.strokeColor = '#e08285';


    getView($("#canvas-1")).send("testAction");


}

function onMouseUp(event) {
    path.fullySelected = false;
    path.strokeColor = '#e4141b';
}
</script>

Upvotes: 1

Related Questions