通过从文本区域获取代码，在画布中运行处理代码

Running processing code in canvas by getting the code from textarea

本文关键字：布中 运行 代码 处理 取代码 文本 区域 获取      更新时间：2023-09-26

我正试图从textbox中获取处理代码，并使其在画布上运行，但我不知道发生了什么，有人能帮我吗？当我调试时，上面写着ctx.compile（）；不是函数，我怎样才能使它正常工作？这是我使用的代码。

<!DOCTYPE Html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles/style2.css" >
    <script src="processing-1.4.1.js"></script>
<script type="text/javascript">
function submitTryit() {
        var text = document.getElementById("textareaCode").value;
        var ifr = document.createElement("iframe");
        ifr.setAttribute("frameborder", "0");
        ifr.setAttribute("id", "iframeResult");
        document.getElementById("iframewrapper").innerHTML = "";
        document.getElementById("iframewrapper").appendChild(ifr);    
        var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
        ifrw.document.open();
        ifrw.document.write(text);  
        ifrw.document.close();
        canvas();     
        if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
        ifrw.document.body.contentEditable = true;
        ifrw.document.body.contentEditable = false;
        }
    function canvas() {
        var ifrr = document.getElementById('iframeResult');
        var iframediv = (ifrr.contentWindow.document) ? ifrr.contentWindow.document : (ifrr.contentDocument.document) ? ifrr.contentDocument.document : ifrr.contentDocument;
        var canv = document.createElement('CANVAS');
        canv.setAttribute('id', 'mycanvas');
        var ctx = canv.getContext("2d");
        ctx.compile();
        iframediv.body.appendChild(canv);
    } 
}
function compile(){
    var processingCode = document.getElementById('textCode').value;
    var jsCode = Processing.compile(processingCode).sourceCode;
}

</script> 
</head>
<body>
<div class="container">
<!--Iframe-->
 <div class="iframecontainer">
    <div id="iframewrapper" class="iframewrapper">
    </div>
 </div>
<!--PJS text field-->
 <div class="PJStextwraper">
  <div class="overPJStext">
  </div>
    <textarea id="textCode" spellcheck="false" autocomplete="off" wrap="logical">   int x,y,w;
float vx,vy;
void setup() {
  size(300,200);
  x = int(random(width));
  y = int(random(height));
  vx = random(5);
  vy = random(5);
  w = int(10+random(10));
}
void draw() {
  background(140,70,60);
  ellipse(x,y,w,w);
  x += vx;
  y += vy;
  //
  if(x > width || x < 0) {
    vx *= -1;
  }
  if(y > height || y < 0) {
    vy *= -1;
  }
}
    </textarea>
 </div>
<button class="BT" type="button" onclick="submitTryit()">Run &raquo;</button>
</div> <!-- End container-->
</body>
</html>

由于您试图调用2d画布上下文中不存在的函数，因此会出现错误"ctx.compile（）；不是函数"。如果我理解正确的话，您正在尝试运行自己的compile函数，并将其呈现在刚刚创建的画布上。

要做到这一点，你需要改变一些事情，尝试以下操作，看看它是否有效：

function canvas() {
    var ifrr = document.getElementById('iframeResult');
    var iframediv = (ifrr.contentWindow.document) ? ifrr.contentWindow.document : (ifrr.contentDocument.document) ? ifrr.contentDocument.document : ifrr.contentDocument;
    var canv = document.createElement('canvas');
    canv.setAttribute('id', 'mycanvas');
    // The ctx will be created in an instance of Processing.
    // So no need for the following line.
    // var ctx = canv.getContext("2d");
    compile(canv);
    iframediv.body.appendChild(canv);
}
// Here you can pass the canvas where you want to render the code.
function compile(canv) {
    var processingCode = document.getElementById('textCode').value;
    var jsCode = Processing.compile(processingCode).sourceCode;
    // Now that you have the code in JS, you can create an instance of Processing.
    // But, what you get from the compiler is a string,
    // so you need to convert the string to JS.
    // For instance, I use here eval(jsCode) 
    var processingInstance = new Processing(canv, eval(jsCode));
}
相关文章：