如何使用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的形状） 在Chrome版本26.0.1410.65上的OSX 10.8上（但不适用于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中的名称冲突，在JS中将布尔mousepressed称为__mousePressed。他们建议您使用Java语法对应用程序进行编码，并将其自动转换为JS，以避免这些问题。

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