Ausführen von Bearbeitungscode in Canvas durch Abrufen des Codes aus Textbereich

Ich versuche, den Bearbeitungscode aus Textfeld zu bekommen und es in Canvas laufen zu lassen, aber ich weiß nicht, was passiert, kann mir jemand helfen? Wenn ich es debugge, sagt es ctx.compile(); ist keine Funktion Wie kann ich es funktionieren lassen? Hier ist der Code den ich benutze.Ausführen von Bearbeitungscode in Canvas durch Abrufen des Codes aus Textbereich

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

Quelle

2016-05-04 Mimi Chan

Haben Sie an der Konsole angesehen, wenn es zu sehen, irgendwelche Fehler ??? Hit F12, um an Dev-Tools und die Konsole – Blindman67

Ich habe es versucht, geben Sie mir Ausnahme: Typ Fehler, der sagt: Ctx.compile() ist keine Funktion. Ich habe versucht, etwas wie eine var com = compile(); ctx.com; und der Code wird ohne Fehler ausgeführt, aber die Zeichenfläche ist nicht auf dem Bildschirm und die Konsole sagt, dass com nicht definiert ist. –

Der Fehler „ctx.compile(); ist keine Funktion“ erwartet, da Sie versuchen, eine Funktion aufzurufen, die nicht auf dem 2d Leinwand Kontext existiert. Wenn ich das richtig verstehe, versuchen Sie, Ihre eigene compile Funktion auszuführen und sie auf der gerade erstellten Arbeitsfläche zu rendern.

so zu tun, müssen Sie ein paar Dinge ändern, versuchen Sie die folgenden und sehen, ob es funktioniert:

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)); 
}

Quelle

2016-05-09 12:28:04 1cgonza

Ups Ich habe einen falschen Code freigegeben sorry dafür, dass ich dieses Problem früher behoben habe, danke für Hilfe, aber das Fehler ** iframediv.body ist null ** ist immer noch apear, wenn ich versuche, Code auszuführen, wenn ich die Ausführen-Taste drücke. Ich weiß, dass ich nichts in ein Element setzen kann, das nicht auf dem Dokument yhet erstellt wurde, aber wenn es nicht auf dem Dokument wäre, wäre der Wert von iframediv undefiniert, oder nicht? Obwohl, wenn ich mit dem Debuggen beginne, läuft der Code wieder, wie ti sein sollte ... ich weiß nicht, was los ist. PS Entschuldigung für meine schlechte Erklärung, aber ich bin neu im Programmieren. –

Vergiss es, ich finde meinen Fehler Ich musste nur eine Codezeile in meinem Beispiel der HTML-Seite, die ich geschrieben habe, löschen. Danke für die Hilfe. –

Wenn dies die Antwort war, nach der du gesucht hast, kannst du sie akzeptieren;) - Wenn nicht, bitte teile deine eigene Lösung, damit andere sie auch lernen können. Viel Glück bei Ihrem Lernprozess! – 1cgonza

Ausführen von Bearbeitungscode in Canvas durch Abrufen des Codes aus Textbereich

Antwort

Verwandte Themen