Question

有没有人能够使用ember.js的paper.js？我是两个图书馆的新手，并且无法让事情发挥作用。当我提到'纸'对象时，我收到一个错误：'纸'没有定义。

任何帮助都将非常感谢!!

-nt

Answer 1

这是使用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());
    }

  }
});

<强> 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>

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

Paper.js与Ember.js

1 个答案: