processing.js 学习（五）

来源：互联网发布：sql面试题编辑：程序博客网时间：2024/05/06 02:51

把更复杂的对象从js传递给草图

这件事是十分重要的，因为很常用。比如我们用AJAX获得了数据，并要在草图上使用。

事实上，我们可以在草图上用js定义对象，并传递给草图做处理。举例来说，我们给出了下面的这个草图，它可以实现用鼠标点击画点，并把画的点连成线。

1206.html

<!DOCTYPE html><html>    <head>       <title>more</title>        <meta charset="utf-8">        <style>        </style>    </head>    <body>       <script src="processing.js"></script>       <canvas data-processing-sources="click.pde"></canvas>    </body></html>

click.pde

ArrayList points;    ArrayList getPoints() { return points; }    void setup() {      size(200,200);      points = new ArrayList();      noLoop();      stroke(255,0,0);     fill(255);   }   void draw() {     background(200,200,255);     for(int p=0, end=points.size(); p < end; p++) {       Point pt = (Point) points.get(p);       if(p < end-1) {       Point next = (Point) points.get(p+1);       line(pt.x,pt.y,next.x,next.y); }       pt.draw(); }   }   void mouseClicked() {     points.add(new Point(mouseX,mouseY));     redraw();   }   class Point {     int x,y;     Point(int x, int y) { this.x=x; this.y=y; }     void draw() { ellipse(x,y,10,10); }   }

processing.js 省略

效果如下：
这里写图片描述

加入一些预先定义好的点:
把上面的1206.html加一些东西：

<!DOCTYPE html><html>    <head>       <title>more</title>        <meta charset="utf-8">        <style>        </style>    </head>    <body>       <script src="processing.js"></script>       <script type="text/javascript">    function loadPoints(id, button) {     var pjs = Processing.getInstanceById(id);     var points = pjs.getPoints();     points.add(new pjs.Point(10,10));     points.add(new pjs.Point(10,190));     points.add(new pjs.Point(190,190));     points.add(new pjs.Point(190,10));     pjs.draw();   }        </script>       <canvas id="sss" data-processing-sources="click.pde"></canvas>       <button type="button" onclick="loadPoints('sss',true)">load</button>    </body></html>

效果如下
这里写图片描述

JSON

另一种常用的通过js获取数据的的方式就是读取JSON脚本。依旧按照上面的例子，我们把点数据从json中获取。

12060.html

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>My Processing Page</title>    <script type="text/javascript" src="processing.js"></script>    <script type="text/javascript">        function drawPoints(id,button) {            var pjs = Processing.getInstanceById(id);            var json = "{'points' : [{'x': 10, 'y': 10}, {'x': 190, 'y': 10}, {'x': 190, 'y': 190}, {'x': 10, 'y': 190}]}";//$.getJSON("ttt.json");            var data = eval("(" + json + ")");            console.log(data);            if (data) {                for (p = 0, end = data.points.length; p < end; p++) {                    var point = data.points[p];                    pjs.addPoint(point.x, point.y);                }            }        }    </script></head><body>    <canvas id="aaa" data-processing-sources="jsont.pde"></canvas>    <button type="button" id="drawPoints" onclick="drawPoints('aaa',true)">load</button></body></html>

jsont.pde

void setup() {      size(200,200);      points = new ArrayList();    }    void draw() {      background(200,200,255);     for(int p=0, end=points.size(); p<end; p++) {       Point pt = (Point) points.get(p);       if(p<end-1) {         Point next = (Point) points.get(p+1);         line(pt.x,pt.y,next.x,next.y); }       pt.draw(); }   }   void mouseClicked() {     addPoint(mouseX,mouseY);   }   Point addPoint(int x, int y) {     Point pt = new Point(x,y);     points.add(pt);     return pt;   }   class Point {     int x,y;     Point(int x, int y) { this.x=x; this.y=y; }     void draw() {       stroke(255,0,0);       fill(255);       ellipse(x,y,10,10);     }   }

效果：
这里写图片描述

同理XML也OK，这里就不举例了。

0 0