AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Just use one version of the scripts in both the browser and in SkV8 by using feature detection to determine if we are running in a browser, and if the platform supports the Path() object. Also add oval, console.log, and the snow example code.

Browse Source 
BUG=
R=robertphillips@google.com

Author: jcgregorio@google.com

Review URL: https://codereview.chromium.org/132413002

git-svn-id: http://skia.googlecode.com/svn/trunk@13031 2bbb7eff-a529-9590-31e7-b0007b416f81
This commit is contained in:
commit-bot@chromium.org 2014-01-10 21:33:01 +00:00
parent 4d5e1366c9
commit cd11018625
8 changed files with 231 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
experimental/SkV8Example/Path.cpp
View File

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

1
experimental/SkV8Example/Path.h
View File

@ -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;

27
experimental/SkV8Example/SkV8Example.cpp
View File

@ -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()) {

4
experimental/SkV8Example/compare/gears.html
View File

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

93
experimental/SkV8Example/compare/gears.js
View File

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

11
experimental/SkV8Example/compare/snow.html Normal file
View File

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

100
experimental/SkV8Example/gears.js
View File

@ -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);
}
p.close();
return p;
}
function draw3DGear(ctx, angle, faceColor, sideColor, path) {
ctx.strokeStyle = sideColor;
ctx.fillStyle = faceColor;
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();
}
}
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);
}
}

92
experimental/SkV8Example/snow.js Normal file
View File

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