aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--experimental/SkV8Example/Path.cpp29
-rw-r--r--experimental/SkV8Example/Path.h1
-rw-r--r--experimental/SkV8Example/SkV8Example.cpp27
-rw-r--r--experimental/SkV8Example/compare/gears.html4
-rw-r--r--experimental/SkV8Example/compare/gears.js93
-rw-r--r--experimental/SkV8Example/compare/snow.html11
-rw-r--r--experimental/SkV8Example/gears.js100
-rw-r--r--experimental/SkV8Example/snow.js92
8 files changed, 231 insertions, 126 deletions
diff --git a/experimental/SkV8Example/Path.cpp b/experimental/SkV8Example/Path.cpp
index 2b53a0f8e1..90574f40f0 100644
--- a/experimental/SkV8Example/Path.cpp
+++ b/experimental/SkV8Example/Path.cpp
@@ -43,13 +43,14 @@ void Path::AddToGlobal(Global* global) {
gGlobal->getIsolate(), Path::ConstructPath);
constructor->InstanceTemplate()->SetInternalFieldCount(1);
- ADD_METHOD("close", ClosePath);
+ ADD_METHOD("closePath", ClosePath);
ADD_METHOD("moveTo", MoveTo);
ADD_METHOD("lineTo", LineTo);
ADD_METHOD("quadraticCurveTo", QuadraticCurveTo);
ADD_METHOD("bezierCurveTo", BezierCurveTo);
ADD_METHOD("arc", Arc);
ADD_METHOD("rect", Rect);
+ ADD_METHOD("oval", Oval);
context->Global()->Set(String::NewFromUtf8(
gGlobal->getIsolate(), "Path"), constructor->GetFunction());
@@ -191,3 +192,29 @@ void Path::Rect(const v8::FunctionCallbackInfo<Value>& args) {
Path* path = Unwrap(args);
path->fSkPath.addRect(rect);
}
+
+void Path::Oval(const v8::FunctionCallbackInfo<Value>& args) {
+ if (args.Length() != 4 && args.Length() != 5) {
+ args.GetIsolate()->ThrowException(
+ v8::String::NewFromUtf8(
+ args.GetIsolate(), "Error: 4 or 5 args required."));
+ return;
+ }
+ double x = args[0]->NumberValue();
+ double y = args[1]->NumberValue();
+ double radiusX = args[2]->NumberValue();
+ double radiusY = args[3]->NumberValue();
+ SkPath::Direction dir = SkPath::kCW_Direction;
+ if (args.Length() == 5 && !args[4]->BooleanValue()) {
+ dir = SkPath::kCCW_Direction;
+ }
+ Path* path = Unwrap(args);
+ SkRect rect = {
+ SkDoubleToScalar(x-radiusX),
+ SkDoubleToScalar(y-radiusX),
+ SkDoubleToScalar(x+radiusY),
+ SkDoubleToScalar(y+radiusY)
+ };
+
+ path->fSkPath.addOval(rect, dir);
+}
diff --git a/experimental/SkV8Example/Path.h b/experimental/SkV8Example/Path.h
index 0c697700cd..3c21c9c0f4 100644
--- a/experimental/SkV8Example/Path.h
+++ b/experimental/SkV8Example/Path.h
@@ -39,6 +39,7 @@ public:
static void BezierCurveTo(const v8::FunctionCallbackInfo<v8::Value>& args);
static void Arc(const v8::FunctionCallbackInfo<v8::Value>& args);
static void Rect(const v8::FunctionCallbackInfo<v8::Value>& args);
+ static void Oval(const v8::FunctionCallbackInfo<v8::Value>& args);
private:
SkPath fSkPath;
diff --git a/experimental/SkV8Example/SkV8Example.cpp b/experimental/SkV8Example/SkV8Example.cpp
index 6eb8d89e04..eb0e713376 100644
--- a/experimental/SkV8Example/SkV8Example.cpp
+++ b/experimental/SkV8Example/SkV8Example.cpp
@@ -156,12 +156,28 @@ SkOSWindow* create_sk_window(void* hwnd, int argc, char** argv) {
Isolate* isolate = Isolate::GetCurrent();
Global* global = new Global(isolate);
+
+ // Set up things to look like a browser by creating
+ // a console object that invokes our print function.
+ const char* startupScript =
+ "function Console() {}; \n"
+ "Console.prototype.log = function() { \n"
+ " var args = Array.prototype.slice.call(arguments).join(' '); \n"
+ " print(args); \n"
+ "}; \n"
+ "console = new Console(); \n";
+
+ if (!global->parseScript(startupScript)) {
+ printf("Failed to parse startup script: %s.\n", FLAGS_infile[0]);
+ exit(1);
+ }
+
const char* script =
-"function onDraw(canvas) { \n"
-" canvas.fillStyle = '#00FF00'; \n"
-" canvas.fillRect(20, 20, 100, 100); \n"
-" canvas.inval(); \n"
-"} \n";
+ "function onDraw(canvas) { \n"
+ " canvas.fillStyle = '#00FF00'; \n"
+ " canvas.fillRect(20, 20, 100, 100); \n"
+ " canvas.inval(); \n"
+ "} \n";
SkAutoTUnref<SkData> data;
if (FLAGS_infile.count()) {
@@ -179,6 +195,7 @@ SkOSWindow* create_sk_window(void* hwnd, int argc, char** argv) {
exit(1);
}
+
JsContext* jsContext = new JsContext(global);
if (!jsContext->initialize()) {
diff --git a/experimental/SkV8Example/compare/gears.html b/experimental/SkV8Example/compare/gears.html
index b59664a8a1..a53789c9dc 100644
--- a/experimental/SkV8Example/compare/gears.html
+++ b/experimental/SkV8Example/compare/gears.html
@@ -5,7 +5,7 @@
<meta charset="utf-8" />
</head>
<body>
- <canvas id=gears width=500 height=400>
- <script src="gears.js" type="text/javascript" charset="utf-8"></script>
+ <canvas id=gears width=500 height=500>
+ <script src="../gears.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
diff --git a/experimental/SkV8Example/compare/gears.js b/experimental/SkV8Example/compare/gears.js
deleted file mode 100644
index cca8213d98..0000000000
--- a/experimental/SkV8Example/compare/gears.js
+++ /dev/null
@@ -1,93 +0,0 @@
-var NumTeeth = 24;
-var Delta = Math.PI/90;
-var NumGears = 60;
-var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"];
-var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"];
-
-
-function drawGear(ctx, r) {
- var dT = Math.PI*2/NumTeeth;
- var dTq = dT/4;
- var outer = r;
- var inner = 0.7 * r;
- ctx.beginPath();
- for (var i=0; i<NumTeeth; i+=2) {
- ctx.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer);
- ctx.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner);
- ctx.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner);
- ctx.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer);
- }
- ctx.closePath();
- ctx.stroke();
-};
-
-function draw3DGear(ctx, angle, faceColor, sideColor, r) {
- ctx.fillStyle = faceColor;
- ctx.strokeStyle = sideColor;
- ctx.rotate(angle);
- drawGear(ctx, r);
- for (var i=0; i < 20; i++) {
- ctx.rotate(-angle);
- ctx.translate(0.707, 0.707);
- ctx.rotate(angle);
- drawGear(ctx, r);
- }
- ctx.fill()
- ctx.rotate(-angle);
-}
-
-function draw3DGearAt(ctx, x, y, r, angle, faceColor, sideColor) {
- ctx.save();
- ctx.translate(x, y);
- draw3DGear(ctx, angle, faceColor, sideColor, r);
- ctx.restore();
-}
-
-var anim = function() {
- var canvas = document.getElementById('gears');
- var ctx = canvas.getContext("2d");
- var ticks=0;
- var rotation = 0;
- var gears = [];
-
- for (var i=0; i<NumGears; i++) {
- color = Math.floor(Math.random()*FaceColors.length);
- gears.push({
- x: Math.random()*500,
- y: Math.random()*500,
- r: Math.random()*100+5,
- faceColor: FaceColors[color],
- sideColor: SideColors[color]
- });
- }
-
- function draw() {
- ctx.resetTransform();
- ctx.fillStyle = 'white';
- ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
- rotation += Delta;
- if (rotation >= Math.PI*2) {
- rotation = 0;
- }
-
- for (var i=0; i < gears.length; i++) {
- draw3DGearAt(ctx, gears[i].x, gears[i].y, gears[i].r, rotation,
- gears[i].faceColor, gears[i].sideColor); }
-
- ticks++;
- requestAnimationFrame(draw);
- }
-
- requestAnimationFrame(draw);
-
-
- function fps() {
- console.log(ticks);
- ticks = 0;
- }
-
- setInterval(fps, 1000);
-}();
-
-
diff --git a/experimental/SkV8Example/compare/snow.html b/experimental/SkV8Example/compare/snow.html
new file mode 100644
index 0000000000..cc5ad0cb75
--- /dev/null
+++ b/experimental/SkV8Example/compare/snow.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Snow</title>
+ <meta charset="utf-8" />
+</head>
+<body>
+ <canvas id=snow width=500 height=500>
+ <script src="../snow.js" type="text/javascript" charset="utf-8"></script>
+</body>
+</html>
diff --git a/experimental/SkV8Example/gears.js b/experimental/SkV8Example/gears.js
index 89547a278d..7eb4c5b198 100644
--- a/experimental/SkV8Example/gears.js
+++ b/experimental/SkV8Example/gears.js
@@ -1,45 +1,78 @@
+var IS_SKV8 = typeof document == "undefined";
+var HAS_PATH = typeof Path != "undefined";
+
var NumTeeth = 24;
var NumGears = 60;
var DeltaTheta = Math.PI/90;
var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"];
var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"];
-function gearPath(r) {
- var outer = r;
- var inner = 0.7 * r;
+function makeGear(pathLike, r) {
var dT = Math.PI*2/NumTeeth;
var dTq = dT/4;
- p = new Path();
- p.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer);
+ var outer = r;
+ var inner = 0.7 * r;
+ pathLike.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer);
for (var i=0; i<NumTeeth; i+=2) {
- p.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer);
- p.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner);
- p.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner);
- p.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer);
+ pathLike.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer);
+ pathLike.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner);
+ pathLike.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner);
+ pathLike.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer);
+ }
+}
+
+function gearPath(r) {
+ if (HAS_PATH) {
+ p = new Path();
+ makeGear(p, r)
+ p.closePath();
+ return p;
+ } else {
+ return null;
+ }
+}
+
+function strokeGear(ctx, gear) {
+ if (HAS_PATH) {
+ ctx.stroke(gear.path);
+ } else {
+ ctx.beginPath();
+ makeGear(ctx, gear.r);
+ ctx.closePath();
+ ctx.stroke();
+ }
+}
+
+function fillGear(ctx) {
+ if (HAS_PATH) {
+ ctx.fill(gear.path);
+ } else {
+ ctx.beginPath();
+ makeGear(ctx, gear.r);
+ ctx.closePath();
+ ctx.fill();
}
- p.close();
- return p;
}
-function draw3DGear(ctx, angle, faceColor, sideColor, path) {
- ctx.strokeStyle = sideColor;
- ctx.fillStyle = faceColor;
+function draw3DGear(ctx, angle, gear) {
+ ctx.strokeStyle = gear.sideColor;
+ ctx.fillStyle = gear.faceColor;
ctx.rotate(angle);
- ctx.stroke(path);
+ strokeGear(ctx, gear);
for (var i=0; i < 20; i++) {
ctx.rotate(-angle);
ctx.translate(0.707, 0.707);
ctx.rotate(angle);
- ctx.stroke(path);
+ strokeGear(ctx, gear);
}
- ctx.fill(path)
+ fillGear(ctx, gear);
ctx.rotate(-angle);
}
-function draw3DGearAt(ctx, x, y, angle, path, faceColor, sideColor) {
+function draw3DGearAt(ctx, angle, gear) {
ctx.save();
- ctx.translate(x, y);
- draw3DGear(ctx, angle, faceColor, sideColor, path);
+ ctx.translate(gear.x, gear.y);
+ draw3DGear(ctx, angle, gear);
ctx.restore();
}
@@ -50,10 +83,12 @@ var onDraw = function() {
for (var i=0; i<NumGears; i++) {
color = Math.floor(Math.random()*FaceColors.length);
+ r = Math.random()*100+5;
gears.push({
x: Math.random()*500,
y: Math.random()*500,
- path: gearPath(Math.random()*100+5),
+ path: gearPath(r),
+ r: r,
faceColor: FaceColors[color],
sideColor: SideColors[color]
});
@@ -68,16 +103,18 @@ var onDraw = function() {
}
for (var i=0; i < gears.length; i++) {
- draw3DGearAt(ctx, gears[i].x, gears[i].y, rotation, gears[i].path,
- gears[i].faceColor, gears[i].sideColor);
+ gear = gears[i];
+ draw3DGearAt(ctx, rotation, gear);
}
ticks++;
- inval();
+ if (IS_SKV8) {
+ inval();
+ }
};
function fps() {
- print(ticks);
+ console.log(ticks);
ticks = 0;
setTimeout(fps, 1000);
};
@@ -86,3 +123,16 @@ var onDraw = function() {
return draw;
}();
+
+if (!IS_SKV8) {
+ window.onload = function(){
+ var canvas = document.getElementById("gears");
+ var ctx = canvas.getContext("2d");
+ function drawCallback() {
+ onDraw(ctx);
+ setTimeout(drawCallback, 1);
+ }
+ setTimeout(drawCallback, 1);
+ }
+}
+
diff --git a/experimental/SkV8Example/snow.js b/experimental/SkV8Example/snow.js
new file mode 100644
index 0000000000..87ce119198
--- /dev/null
+++ b/experimental/SkV8Example/snow.js
@@ -0,0 +1,92 @@
+var IS_SKV8 = typeof document == "undefined";
+
+function circlePath(r) {
+ if (IS_SKV8) {
+ var p = new Path();
+ p.oval(0, 0, r, r);
+ p.closePath();
+ return p;
+ } else {
+ return null;
+ }
+}
+
+var onDraw = function() {
+ var W = 500;
+ var H = 500;
+ var NumParticles = 100;
+
+ var angle = 0;
+ var ticks = 0;
+ var particles =[];
+
+ for (var i = 0; i < NumParticles; i++) {
+ particles[i] = {
+ x: Math.floor(Math.random()*W),
+ y: Math.floor(Math.random()*H),
+ r: Math.floor(Math.random()*7+1),
+ path: circlePath(Math.random()*7+1),
+ }
+ }
+
+ function draw(ctx) {
+ ctx.fillStyle = "#ADD8E6";
+ ctx.fillRect(0, 0, W-1, H-1);
+ ctx.fillStyle = "#FFFFFF";
+
+ angle += 0.0039;
+ for (var i = 0; i < particles.length; i++) {
+ var p = particles[i];
+ p.x += Math.floor(Math.sin(angle)*5.0);
+ p.y += 0.6*p.r;
+ if (p.x > W) {
+ p.x-=W;
+ }
+ if (p.x < 0) {
+ p.x += W;
+ }
+ if(p.y>(H+1)){
+ p.y = 0;
+ }
+ if (IS_SKV8) {
+ ctx.save();
+ ctx.translate(p.x, p.y);
+ ctx.fill(p.path);
+ ctx.restore();
+ } else {
+ ctx.beginPath();
+ ctx.moveTo(p.x, p.y);
+ ctx.arc(p.x, p.y, p.r, 0, 2*Math.PI, true);
+ ctx.closePath();
+ ctx.fill();
+ }
+ };
+
+ ticks++;
+ if (IS_SKV8) {
+ inval();
+ }
+ }
+
+ function fps() {
+ console.log(ticks);
+ ticks = 0;
+ setTimeout(fps, 1000);
+ }
+
+ setTimeout(fps, 1000);
+
+ return draw;
+}();
+
+if (!IS_SKV8) {
+ window.onload = function(){
+ var canvas = document.getElementById("snow");
+ var ctx = canvas.getContext("2d");
+ function drawCallback() {
+ onDraw(ctx);
+ setTimeout(drawCallback, 1);
+ }
+ setTimeout(drawCallback, 1);
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-26 20:33:26 +0000