Paper.js与Ember.js

这是与paper.js一起使用的示例ember.js。单击时，事件view将从paperjs事件处理代码发送到余烬，该事件处理代码将填充对应的数组，该数组controller绑定到模板并将其呈现在输出中。

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

  }
});

血红蛋白

<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 （来自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>