Fatal编程技术网
  • javascript/
  • Javascript Processing.js预编译脚本不工作，抛出；不支持PJS编译"；错误

Javascript Processing.js预编译脚本不工作，抛出；不支持PJS编译"；错误

javascript html5-canvas

Javascript Processing.js预编译脚本不工作，抛出；不支持PJS编译"；错误,javascript,html5-canvas,processing.js,Javascript,Html5 Canvas,Processing.js,因此，我尝试将processing的PDE文件预编译为processing.js的PJS文件，以节省带宽并能够轻松缩小代码 我已经尝试了很多东西，我读了以下两个问题及其答案： 但是，它不会加载，Firebug会告诉我： uncaught exception: PJS compile is not supported 我得到了“常规”版本，可以读取PDE文件，但我更愿意在未来的项目中使用这个版本 这是HTML代码，api.1.0.0.min.js是processing.js v1.4.1 a

因此，我尝试将processing的PDE文件预编译为processing.js的PJS文件，以节省带宽并能够轻松缩小代码

我已经尝试了很多东西，我读了以下两个问题及其答案：

但是，它不会加载，Firebug会告诉我：

uncaught exception: PJS compile is not supported
我得到了“常规”版本，可以读取PDE文件，但我更愿意在未来的项目中使用这个版本

这是HTML代码，api.1.0.0.min.js是processing.js v1.4.1 api，集成了html5的全屏方法，它还包括minim，并且它在“常规”版本上工作（对processing.js的非api版本进行了相同的修改）


Ikben V1.01
html{溢出：隐藏；}
正文{边距：0；填充：0}
：-webkit全屏#IkbenCanvas{宽度：100%；高度：100%；}
新加工（IkbenCanvas、草图）
Apache提供字体类型和缓存信息，所以它不在这里

我使用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”*/
（职能（p美元）{
var-song=null；
var最小值=零；
最小值=新的最小值（本）；
var=null；
var numberOfImages=0，
imageSize=0，
高度计数器=0，
宽度计数器=0；
var loopingBackground=false，
audioStarted=false；
var images=$p.createJavaArray（$p.PImage'，[8]）；
函数设置（）{
$p.textAlign（$p.CENTER，$p.CENTER）；
$p.imageMode（$p.CENTER）；
每帧30美元；
numberOfImages=3；
$p.noStroke（）；
无意义=$p.loadStrings（“data/text.txt”）；
图像[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”）；
图像[5]=$p.loadImage（“data/f.png”）；
图像[6]=$p.loadImage（“data/g.png”）；
images[7]=$p.loadImage（“data/h.png”）；
horseSong=minim.loadFile（“data/song.mp3”）；
}
$p.setup=设置；
函数绘图（）{
$p.size（self.innerWidth、self.innerHeight）；
如果（$p.millis（）>2500）{
如果（！audioStarted）{
horseSong.loop（）；
audioStarted=true；
}
高度计数器=$p.height；
宽度计数器=$p.width；
loopingBackground=true；
while（循环背景）{
$p.fill（$p.random（0255），$p.random（0255），$p.random（0255））；
$p.rect（宽度计数器/10-$p.width/10，高度计数器/10-$p.height/10，宽度计数器，高度计数器）；
高度计数器-=高度计数器/10；
宽度计数器-=宽度计数器/10；

如果（heightCounter我最终让它工作了，那么api.1.0.0.min.js文件包含processing-js-1.4.1-api、mini.js，它还包含MDN的toggleFullScreen（）方法



Ikben V1.02
html{position:fixed；top:0；bottom:0；left:0；right:0}正文{margin:0；padding:0}
var appCode=（函数（$p）{
var horseSong=null，minim=null
最小值=新的最小值（本）
var胡说八道=[“test”，“hoi”，“doei”，“foo”，“bar”，“stuff”，“hoi-hoi-hoi”，“test123”，“abcdef”，“123”]，numberOfImages=3，imageSize=0，heightCounter=0，widthCounter=0，loopingBackground=！1，audioStarted=！1，images=$p.createJavaArray（$p.PImage，[8]）
函数设置（）(“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
函数draw（）{if（$p.size（self.innerWidth，self.innerHeight），$p.millis（）>2500）{for（audioStarted | |（horsessong.loop（），audioStarted=！0），heightCounter=$p.height，widthCounter=$p.width，loopingBackground=！0；loopingBackground；）$p.fill（$p.random（0255），$p.random（0255）），$p.rect（宽度计数器/10-$p.width/10，高度计数器/10-$p.height/10，宽度计数器，高度计数器），高度计数器-=高度计数器/10，宽度计数器-=宽度计数器/10，高度计数器>$p.height/10 | |（循环背景=！1）
对于（var e=0；numberOfImages>e；e++）imageSize=$p.random（$p.height/20，$p.height）），$p.image（images[$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（0255），$p.random（0255），$p.random（0255）），$p.text（无意义[$p.random（0，无意义.length）），$p.random（100，$p.height-200））}其他$p.fill（130），$p.rect（0,0，$p.width，$p.height，$p.height），$p.fill（0），$p.fill），$p.textSize，$p.30），$p.text（$p.width）。”按下按钮或单击全屏。“，$p.width/2，$p.height/2）}$p.draw=draw
函数mouseClicked（）{toggleFullScreen（）}$p.mouseClicked=mouseClicked
函数keyPressed（）{toggleFullScreen（）}$p.keyPressed=keyPressed
})
新处理（appCanvas、appCode）；



<!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>



/* @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;
})



<!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>