把更復雜的對象從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，這裏就不舉例了。