javascript - 将 paperjs 与 jsfiddle 一起使用

Question

我刚刚发现了paperjs，一个你可能已经听说过的很棒的矢量图形框架。

我偶然发现了一个问题，我绝对不知道如何使它与 jsfiddle 一起工作！我在网上找到的几个示例之所以有效，是因为所有代码都被卡在 HTML 部分的 paperscript 标记中。

知道如何使“Javascript”部分工作，从而利用语法着色吗？

非常感谢！

Answer 1

默认情况下，您不能将 paperjs 代码放在 javascript 面板中。你需要破解 jsFiddler 来做到这一点。查看来自 jsFiddler 的文档

请将 Code Wrap 设置为 no wrap(head)（默认为 onLoad），并将 Franework 设置为 No-library（纯 JS）。

Paperscript 与 CoffeeScript 类似，要求 script 标签为 text/paperscript 的类型，并在 canvas 参数中提供 canvas 元素的 id。在 HTML 面板中输入以下内容，您将能够在 JavaScript 面板中编写 Paperscript。

<canvas id="some-unique-id" resize keepalive="true" style='height: 200; width: 200;'>    </canvas>
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s)[2].innerHTML.split(n);d.write('<'+s+' type="text/paperscript" canvas="' + document.getElementsByTagName('canvas')[0].id + '">'+b.slice(2,b.length-2).join(n)+'</'+s+'>')})()</script>

示例：http: //jsfiddle.net/zalun/LrGEm/12/

Answer 2

还有sketch.paperjs.org

Sketch.paperjs.org

Answer 3

或者，您可以使用https://www.jsbin.com进行编码。它将允许在 javascript 占位符中编写 JS。