javascript - 如何使用 ProcessingJS 正确/干净地绘制 SVG 图形？

Question

我刚开始使用 ProcessingJS，目前正在研究 SVG。 不幸的是，我遇到了显示 SVG 的奇怪行为。 这是输出:

这里是产生它的代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script>
$(document).ready(function() {  
    $('body').append($('<canvas id="preview"><p>Your browser does not support the canvas tag.</p></canvas>'));
    function onPJS(p) {
        var glasses;
        p.setup = function(){
            glasses = p.loadShape("brighteyes.svg");
            p.size(Math.floor(glasses.width), Math.floor(glasses.height)+Math.floor(glasses.height * .25));
            //p.shape(glasses,0,0);
            p.frameRate(1);
        }
        //*
        p.draw = function() {
            p.background(32);
            p.shape(glasses, 0, 0);
            console.log(p.mousePressed);//prints undefined
        };
        //*/
    }
    new Processing(document.getElementById("preview"), onPJS);  
});
</script>

我正在经历这种奇怪的渲染(渲染器似乎将形状的顶点放在 0,0 处) 在 OSX 10.8 和 Chrome 版本 26.0.1410.65 上(但不在 Safari (6.0 (8536.25)) 上)。您可以运行代码 here .

我如何得知这些奇怪的渲染错误？

还有另一件意想不到的事情发生:mousePressed 打印未定义，但可能会在不同的问题中解决。

Answer 1

Processing 对 SVG 的支持参差不齐。您可能应该只报告错误 https://github.com/processing-js/processing-js/issues/new ，然后改用 PNG 副本。

注意:在 Firefox 35 上呈现正常。

编辑:为您报道。 https://github.com/processing-js/processing-js/issues/137

上面链接的 GoToLoop 说你的 mousepressed 问题是由于为了避免 JS 中的名称冲突， bool 值 mousepressed 被称为 __mousePressed 在 JS 中。他们建议您使用 Java 语法编写您的应用程序并将其自动翻译成 JS，以避免这些问题。

结果:只需更新 Chrome，您现在可能已经完成了。