Processing.js - ошибка, когда холст помещается в div - PullRequest
Новая
       24

Processing.js - ошибка, когда холст помещается в div

0 голосов
/ 09 сентября 2011

Я пытаюсь получить холст, который использует Processing.js, чтобы он отображался в полноэкранном режиме, но если я помещаю холст в div, чтобы он растягивался на весь экран или выравнивал по центру или делал что-нибудь интересное, то Processing.js выдает ошибку, говоря, что холст не имеет определенного стиля. 

oldCursor = curElement.style.cursor,

В этой строке выдается ошибка «Uncaught TypeError: Невозможно прочитать свойство 'cursor' of undefined".

В следующем разделе один и тот же код применяется к каждому холсту, и единственное отличие, которое я вижу, состоит в том, что холст является дочерним элементом? 

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="processing.js"></script>
    <script type="text/javascript" src="jquery-1.6.3.js"></script>
  </head>
  <body>
    <h1>Example of bug</h1>
    <script type="application/processing" id="sketch">
    void setup(){
      size(1280, 720);
      noFill();
      smooth();
      frameRate(50);
      background(255);
      strokeWeight(2);
    }

    void draw(){
        stroke(0,244,244/4);
        ellipse(5,10,52,52);
    }
    </script>
    <!-- Canvas Element -->
    <canvas style="text-align:center; cursor: pointer; background-color: red; z-index:     0; margin:  0px; padding: 0px;" width="1280" height="720" id="canvas">You do not support     canvas.</canvas>     
    <div>
        <canvas style="text-align:center; cursor: pointer; background-color: blue; z-    index: 0; margin:  0px; padding: 0px;" width="1280" height="720" id="canvasbug">You do not support canvas.</canvas>     
    </div>

    <!-- Sketch Initializer -->
    <script type="text/javascript">    (function () {
            var init = function () {
            // This works fine
            var canvas = $("#canvas");
            canvas.css("background-color", "pink");
            var sketch = $("#sketch").text;
            canvas.css("background-color", "orange");
            new Processing(canvas, sketch);
            canvas.css("background-color", "green");

            //This is bugged
            var canvas = $("#canvasbug");
            canvas.css("background-color", "pink");
            var sketch = $("#sketch").text;
            canvas.css("background-color", "orange");
            new Processing(canvas, sketch);
            canvas.css("background-color", "green");
        }
        addEventListener("DOMContentLoaded", init, false);
    })();
</script>
  </body>
</html>

1 Ответ

1 голос
/ 09 сентября 2011

Вы не передаете элемент canvas, вы передаете объект jQuery.Если вы сделаете: 

var canvas = $("#canvas")[0];
...
var canvasbug = $("#canvasbug")[0];

Вы получите необработанные элементы.

...