3

我开始使用 ProcessingJS，我目前正在使用 SVG。不幸的是，我遇到了显示 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>

我在 Chrome 版本 26.0.1410.65 上的 OSX 10.8 上（但在 Safari（6.0 (8536.25)）上没有）遇到这种奇怪的渲染（渲染器似乎将形状的顶点放置在 0,0 处）。您可以在此处运行代码。

我如何阅读这些奇怪的渲染错误？

发生了另一件意想不到的事情：mousePressed 打印未定义，但可能会在另一个问题中解决这个问题。

4

1 回答 1

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 中的名称冲突，在 JSmousepressed中调用了布尔值__mousePressed。他们建议您使用 Java 语法来编写应用程序并将其自动翻译成 JS，以避免这些问题。

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

于 2015-02-02T19:35:45.583 回答