Processing.js预编译脚本不起作用，引发“不支持PJS编译”错误
[英]Processing.js pre-compiled script not working, throws “PJS compile is not supported” error
问题描述
So I tried pre-compiling processing's PDE files to processing.js's PJS files to save bandwidth and to be able to minify the code easily. 
因此，我尝试将处理的PDE文件预编译为processing.js的PJS文件，以节省带宽并能够轻松地缩减代码。
I already tried a bunch of stuff and I read the following two questions and their answers: 我已经尝试了很多东西，并且阅读了以下两个问题及其答案：
How to precompile processingjs sketch to speed load times? 如何预编译processing.js草图以加快加载时间？
How to have multiple processing.js sketches running at the same time 如何同时运行多个processing.js草图
However, it doesn't load and Firebug gives me this: 但是，它不会加载，Firebug给了我这个：
uncaught exception: PJS compile is not supported
I got the "regular" version that reads PDE files working but I'd rather have this one for future projects. 我有一个“常规”版本，可以读取PDE文件，但我希望以后的项目可以使用该版本。
Here is the HTML code, api.1.0.0.min.js is the processing.js v1.4.1 api with html5's fullscreen method integrated, it also included minim and it does work on the "regular" version (same modifications made to the non-api version of processing.js). 这是HTML代码，api.1.0.0.min.js是与html5的全屏方法集成在一起的processing.js v1.4.1 api，它还包含了minim，并且确实适用于“常规”版本（对非API版本的processing.js）。
<!DOCTYPE html>
<html>
<title>Ikben V1.01</title>
<center>
<style type="text/css">
html {overflow: hidden;}
body{margin: 0; padding: 0}
:-webkit-full-screen #IkbenCanvas{width: 100%; height: 100%;}
</style>
<head>
<canvas id="IkbenCanvas"></canvas>
</head>
<body>
<script src="../api.1.0.0.min.js" type="text/javascript"></script>
<script id="Sketch" src="ikbenweb.pjs" type="text/javascript"></script>
<script>
new Processing(IkbenCanvas, Sketch)
</script>
</body>
</center>
</html>
Apache delivers font type and caching information so that's why it's not in here. Apache提供字体类型和缓存信息，因此这就是为什么不在这里。
The PJS file which I converted using the processing.js helper tool: (Removing the comments for preload doesn't change anything.) 我使用processing.js帮助程序工具转换的PJS文件：（删除预加载的注释不会改变任何内容。）
/* @pjs preload="data/a.png,data/b.png,data/c.png,data/d.png,data/e.png,data/f.png,data/g.png,data/h.png"; */
(function($p) {
var song = null;
var minim = null;
minim = new Minim(this);
var nonsense = null;
var numberOfImages = 0,
imageSize = 0,
heightCounter = 0,
widthCounter = 0;
var loopingBackground = false,
audioStarted = false;
var images = $p.createJavaArray('$p.PImage', [8]);
function setup() {
$p.textAlign($p.CENTER, $p.CENTER);
$p.imageMode($p.CENTER);
$p.frameRate(30);
numberOfImages = 3;
$p.noStroke();
nonsense = $p.loadStrings("data/text.txt");
images[0] = $p.loadImage("data/a.png");
images[1] = $p.loadImage("data/b.png");
images[2] = $p.loadImage("data/c.png");
images[3] = $p.loadImage("data/d.png");
images[4] = $p.loadImage("data/e.png");
images[5] = $p.loadImage("data/f.png");
images[6] = $p.loadImage("data/g.png");
images[7] = $p.loadImage("data/h.png");
horseSong = minim.loadFile("data/song.mp3");
}
$p.setup = setup;
function draw() {
$p.size(self.innerWidth, self.innerHeight);
if ($p.millis() > 2500) {
if (!audioStarted) {
horseSong.loop();
audioStarted = true;
}
heightCounter = $p.height;
widthCounter = $p.width;
loopingBackground = true;
while (loopingBackground) {
$p.fill($p.random(0, 255), $p.random(0, 255), $p.random(0, 255));
$p.rect(widthCounter / 10 - $p.width / 10, heightCounter / 10 - $p.height / 10, widthCounter, heightCounter);
heightCounter -= heightCounter / 10;
widthCounter -= widthCounter / 10;
if (heightCounter <= $p.height / 10) loopingBackground = false;
}
for (var i = 0; i < numberOfImages; i++) {
imageSize = $p.__int_cast($p.random($p.height / 20, $p.height));
$p.image(images[$p.__int_cast($p.random(0, images.length))], $p.random(100, $p.width - 100), $p.random(100, $p.height - 100), imageSize, imageSize);
}
$p.textSize($p.random($p.width / 50, $p.width / 5));
$p.fill($p.random(0, 255), $p.random(0, 255), $p.random(0, 255));
$p.text(nonsense[$p.__int_cast($p.random(0, nonsense.length))], $p.random(100, $p.width - 200), $p.random(100, $p.height - 200));
} else {
$p.fill(130);
$p.rect(0, 0, $p.width, $p.height);
$p.fill(0);
$p.textSize($p.width / 30);
$p.text("Press a button or click for fullscreen.", $p.width / 2, $p.height / 2);
}
}
$p.draw = draw;
function mouseClicked() {
toggleFullScreen();
}
$p.mouseClicked = mouseClicked;
function keyPressed() {
toggleFullScreen();
}
$p.keyPressed = keyPressed;
})
1 个解决方案
解决方案1
0 已采纳 2013-11-16 10:24:35
I got it working in the end, the api.1.0.0.min.js file contains processing-js-1.4.1-api, minim.js and it also contains MDN's toggleFullScreen() method. 我最终使它正常工作，api.1.0.0.min.js文件包含processing-js-1.4.1-api，minim.js，还包含MDN的toggleFullScreen（）方法。
<!DOCTYPE html>
<html>
<title>Ikben V1.02</title>
<center>
<style type="text/css">
html{position:fixed;top:0;bottom:0;left:0;right:0}body{margin:0;padding:0}
</style>
<head>
<canvas id="appCanvas"></canvas>
</head>
<body>
<script src="data/api.1.0.0.min.js" type="text/javascript"></script>
<script>
var appCode = (function($p) {
var horseSong=null,minim=null
minim=new Minim(this)
var nonsense=["test","hoi","doei","foo","bar","stuff","hoi hoi hoi hoi hoi","test123","abcdef","123"],numberOfImages=3,imageSize=0,heightCounter=0,widthCounter=0,loopingBackground=!1,audioStarted=!1,images=$p.createJavaArray("$p.PImage",[8])
function setup(){$p.textAlign($p.CENTER,$p.CENTER),$p.imageMode($p.CENTER),$p.frameRate(30),$p.noStroke(),images[0]=$p.loadImage("data/horse/a.png"),images[1]=$p.loadImage("data/horse/b.png"),images[2]=$p.loadImage("data/horse/c.png"),images[3]=$p.loadImage("data/horse/d.png"),images[4]=$p.loadImage("data/horse/e.png"),images[5]=$p.loadImage("data/horse/f.png"),images[6]=$p.loadImage("data/horse/g.png"),images[7]=$p.loadImage("data/horse/h.png"),horseSong=minim.loadFile("data/horse/song.ogg")}$p.setup=setup
function draw(){if($p.size(self.innerWidth,self.innerHeight),$p.millis()>2500){for(audioStarted||(horseSong.loop(),audioStarted=!0),heightCounter=$p.height,widthCounter=$p.width,loopingBackground=!0;loopingBackground;)$p.fill($p.random(0,255),$p.random(0,255),$p.random(0,255)),$p.rect(widthCounter/10-$p.width/10,heightCounter/10-$p.height/10,widthCounter,heightCounter),heightCounter-=heightCounter/10,widthCounter-=widthCounter/10,heightCounter>$p.height/10||(loopingBackground=!1)
for(var e=0;numberOfImages>e;e++)imageSize=$p.__int_cast($p.random($p.height/20,$p.height)),$p.image(images[$p.__int_cast($p.random(0,images.length))],$p.random(100,$p.width-100),$p.random(100,$p.height-100),imageSize,imageSize)
$p.textSize($p.random($p.width/50,$p.width/5)),$p.fill($p.random(0,255),$p.random(0,255),$p.random(0,255)),$p.text(nonsense[$p.__int_cast($p.random(0,nonsense.length))],$p.random(100,$p.width-200),$p.random(100,$p.height-200))}else $p.fill(130),$p.rect(0,0,$p.width,$p.height),$p.fill(0),$p.textSize($p.width/30),$p.text("Press a button or click for fullscreen.",$p.width/2,$p.height/2)}$p.draw=draw
function mouseClicked(){toggleFullScreen()}$p.mouseClicked=mouseClicked
function keyPressed(){toggleFullScreen()}$p.keyPressed=keyPressed
})
new Processing(appCanvas, appCode);
</script>
</body>
</center>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.