个人中心
gpt4 book ai didi

javascript - Processing.js 预编译脚本不起作用，抛出 "PJS compile is not supported"错误

转载 作者：行者123 更新时间：2023-11-28 08:46:19 25 4
gpt4 key购买 nike

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

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

How to precompile processingjs sketch to speed load times?

How to have multiple processing.js sketches running at the same time

但是，它无法加载，Firebug 给了我这个:

uncaught exception: PJS compile is not supported

我得到了可以读取 PDE 文件的“常规”版本，但我宁愿在未来的项目中使用这个版本。

这里是HTML代码，api.1.0.0.min.js是processing.js v1.4.1 api，集成了html5的全屏方法，它还包含minim并且它确实可以在“常规”版本上工作(相同的修改对处理.js 的非 api 版本进行制作)。

<!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 提供字体类型和缓存信息，因此它不在此处。

我使用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;
})

最佳答案

我最终成功了，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>

关于javascript - Processing.js 预编译脚本不起作用，抛出 "PJS compile is not supported"错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19755421/

25 4 0
文章推荐： javascript - 加载 Ember 数据时捕获事件
文章推荐： swift - 我将如何保存带有叠加在其上的文本(由用户输入)的照片？
文章推荐： javascript - 取消选中特定组的动态生成的复选框
文章推荐： ios - 我如何摆脱这个 Sigabrt 错误？我尝试了多种方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com