处理 JS svg 负载 - Google Appengine答案

【问题标题】：Processing JS svg load - Google Appengine处理 JS svg 负载 - Google Appengine
【发布时间】：2014-04-11 19:43:38
【问题描述】：

我有问题。我想在 Google appengine 云上使用我的处理代码。我异步加载 svg 文件签证 @psj 预加载标签，我将 map1.svg 与 .pde 文件放在同一目录中，所以我只想显示一个 PShape 但它没有显示。我有以下处理代码：

编辑见下文！

我将所有文件（.pde、处理库、geoloc.js）和 map1.svg 放在同一个文件夹 ../static/processing/ 中。

有没有人设法在应用引擎上获得处理文件，其中脚本使用 loadImage() 或 loadShape() ？顺便说一下 geoloc.js 库正在工作，如果我不使用 loadShape 函数，处理代码也可以工作，所以我怀疑 map1.svg 的路径不正确？

编辑！！！！！！！！！

好的，所以现在我已经尽可能地剥离了文件，地图仍然没有显示在 appengine 上，如果我在桌面上打开它，.html 可以工作，所以我仍然怀疑它与在处理代码中加载 map1.svg 文件。必须指出，处理的.pde源找到了，只是地图没有显示！

这是我的处理代码：

再次编辑！现在可以工作了...路径应该更具体 - 相对！

/* @pjs preload="../static/processing/map1.svg"; */

PShape worldMap;

void setup ()
{
    size(500, 500);
    worldMap = loadShape("../static/processing/map1.svg");
}

void draw ()
{
    shape(worldMap, 0, 0, 500, 500);

}

还有 HTML：

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>hiToYouToo : Built with Processing and Processing.js</title>
    <meta name="Generator" content="Processing" />
    <!--[if lt IE 9]>
        <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
    <![endif]-->
    <script src="../static/processing/processing.js" type="text/javascript"></script>
    <script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'hiToYouToo'; }
    </script>
</head>
<body>
    <div id="content">
        <div>
            <canvas id="hiToYouToo" data-processing-sources="../static/processing/hiToYouToo.pde"
                    width="500" height="500">
                <p>Your browser does not support the canvas tag.</p>
                <!-- Note: you can put any alternative content here. -->
            </canvas>
            <noscript>
                <p>JavaScript is required to view the contents of this page.</p>
            </noscript>
        </div>
    </div>
</body>

【问题讨论】：

关于您的 HTML 的注释：如果您说 <!doctype html>，则表明您正在使用 HTML5，但您的 HTML 不遵循 HTML5 约定。您在 HTML5 中想要的元标记是 <meta charset="utf-8">，它们不使用 XML 自闭合语法。如果脚本是 javascript，则脚本不需要类型，noscript 元素甚至不再有意义（没有 JS 的唯一方法是故意将其关闭。没有浏览器不支持javascript'，多年来一直如此）。
除此之外：减少你的测试用例。有@pjs 预加载，只有一个setup() 和draw() 只用loadShape 加载你的.svg 文件，然后用shape(...) 绘制一次。那样有用吗？如果没有，让我们检查该代码，而不是您添加帖子的更复杂的代码。大多数代码与您所询问的问题无关。
好的，我现在编辑了代码...精简了。这真的很奇怪，因为其他一切都有效，我的意思是除了加载形状之外，所以我认为处理 loadShape 并没有在正确的位置搜索它的文件。如何知道在哪里搜索？嗯，我自己回答了这个问题，哈哈。我还必须更改在 .pde 中加载地图的路径！再次查看编辑后的代码...
浏览器的开发工具是怎么说的？如果抓取失败，它将在控制台和网络选项卡中显示为 404。
这不完全正确，如果找不到 .pde，我的控制台会输出错误，然后报告 404 ajax 请求，但如果找不到 .svg，则不会显示错误。但正如我在解决问题之前所说的，检查我在 .pde 文件中编辑的代码，.svg 的路径现在引用了它的整个路径。

标签： javascript jquery google-app-engine svg processing

【解决方案1】：

好吧，我只是正式地回答我自己，所以任何寻找这个的人都会很快找到答案。

这是应用引擎上的处理代码：

/* @pjs preload="../static/processing/map1.svg"; */

PShape worldMap;

void setup ()
{
    size(500, 500);
    worldMap = loadShape("../static/processing/map1.svg");
}

void draw ()
{
    shape(worldMap, 0, 0, 500, 500);

}

还有 HTML：

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>hiToYouToo : Built with Processing and Processing.js</title>
    <meta name="Generator" content="Processing" />
    <!--[if lt IE 9]>
        <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
    <![endif]-->
    <script src="../static/processing/processing.js" type="text/javascript"></script>
    <script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'hiToYouToo'; }
    </script>
</head>
<body>
    <div id="content">
        <div>
            <canvas id="hiToYouToo" data-processing-sources="../static/processing/hiToYouToo.pde"
                    width="500" height="500">
                <p>Your browser does not support the canvas tag.</p>
                <!-- Note: you can put any alternative content here. -->
            </canvas>
            <noscript>
                <p>JavaScript is required to view the contents of this page.</p>
            </noscript>
        </div>
    </div>
</body>

【讨论】：