public BrowserContext(SharpCanvas.Tests.Media.HTMLElement container)
{
// canvas = SharpCanvas.Host.StandaloneBootstrapper.Factory.CreateCanvasElement();
canvas = new SharpCanvas.Browser.Media.HTMLCanvasElement();
_ctx = canvas.getCanvas();
this.container = container;
}
private string sample9(ICanvasRenderingContext2D ctx)
{
// draw background
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";
// set transparency value
ctx.globalAlpha = 0.2F;
// Draw semi transparent circles
for (int i = 0; i < 7; i++)
{
ctx.beginPath();
ctx.arc(75, 75, 10 + 10*i, 0, Math.PI*2, true);
ctx.fill();
}
return @"Originals\Styles\sample9.png";
}
private string sample16(ICanvasRenderingContext2D ctx)
{
// Create gradients
var radgrad = (ILinearCanvasGradient) ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, "#A7D30C");
radgrad.addColorStop(0.9f, "#019F62");
radgrad.addColorStop(1, "rgba(1,159,98,0)");
var radgrad2 = (ILinearCanvasGradient) ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
radgrad2.addColorStop(0, "#FF5F98");
radgrad2.addColorStop(0.75f, "#FF0188");
radgrad2.addColorStop(1, "rgba(255,1,136,0)");
var radgrad3 = (ILinearCanvasGradient) ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
radgrad3.addColorStop(0, "#00C9FF");
radgrad3.addColorStop(0.8f, "#00B5E2");
radgrad3.addColorStop(1, "rgba(0,201,255,0)");
var radgrad4 = (ILinearCanvasGradient) ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
radgrad4.addColorStop(0, "#F4F201");
radgrad4.addColorStop(0.8f, "#E4C700");
radgrad4.addColorStop(1, "rgba(228,199,0,0)");
// draw shapes
ctx.fillStyle = radgrad4;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad;
ctx.fillRect(0, 0, 150, 150);
return @"Originals\Gradients\sample16.png";
}
private string sample28(ICanvasRenderingContext2D ctx)
{
Thread.Sleep(interval);
dragon = new FlyingDragon(surface);
// Create the animation targetting the StrokeDashOffset property
var anima = new Int32Animation
{
Duration = new Duration(TimeSpan.FromSeconds(20)),
FillBehavior = FillBehavior.Stop,
From = 0,
By = 1,
To = 1000
};
// DesiredFrameRate can help reduce CPU cost and improve smoothness.
// It can also cause beating if used improperly. Use with caution!
//Timeline.DesiredFrameRateProperty.OverrideMetadata(typeof(Timeline), new FrameworkPropertyMetadata { DefaultValue = 120 });
Timeline.SetDesiredFrameRate(anima, 20); // 20 fps
// Final per-figure setup
Storyboard.SetTarget(anima, dragon);
//Storyboard.SetDesiredFrameRate(anima, 10);
Storyboard.SetTargetProperty(anima, new PropertyPath(FlyingDragon.IndexProperty));
storyboard.Children.Add(anima);
// Begin the animation
storyboard.Begin();
IsStarted = true;
return string.Empty;
}
private string sample29(ICanvasRenderingContext2D ctx)
{
// Create gradients
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, 0, 0, 450);
lingrad.addColorStop(0, "#00ABEB");
lingrad.addColorStop(0.5, "#fff");
lingrad.addColorStop(0.5, "#26C000");
lingrad.addColorStop(1, "#fff");
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(150, 175, 220, 200);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(0.7, "red");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
// assign gradient to fill
ctx.fillStyle = lingrad;
// draw shape
ctx.fillRect(0, 0, 390, 390);
// assign gradient to stroke
ctx.strokeStyle = lingrad2;
// draw shape
ctx.strokeRect(100, 100, 150, 150);
return @"Originals\Gradients\sample29.png";
}
private string sample12(ICanvasRenderingContext2D ctx)
{
var lineCap = new[] {"butt", "round", "square"};
// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = "black";
for (int i = 0; i < lineCap.Length; i++)
{
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25 + i*50, 10);
ctx.lineTo(25 + i*50, 140);
ctx.stroke();
}
return @"Originals\Lines\sample12.png";
}
private string GrayscaleImage(ICanvasRenderingContext2D ctx)
{
var img = new ImageData();
img.src = "pet.jpg";
grayscale(img, ctx);
return @"Originals\Images\grayscale.png";
}
private string sample1(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30, 30, 55, 50);
return @"Originals\Styles\sample1.png";
}
public object getContext(string contextType)
{
if (contextType == "2d") {
if (this.context == null) {
this.context = new CanvasRenderingContext2D(this.window, this);
}
return this.context;
}
return null;
}
private string StrokeRect(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "#0f0";
ctx.strokeStyle = "#0f0";
ctx.shadowColor = "#00f";
ctx.shadowOffsetX = 32;
ctx.shadowOffsetY = 16;
ctx.shadowBlur = 8;
ctx.strokeRect(32, 25, 128, 128);
return @"Originals\Shadows\StrokeRect.png";
}
public ContextProxy(Graphics s, Bitmap bitmap, Pen stroke, IFill fill, bool visible, ICanvasProxy canvasElement)
: base(Guid.NewGuid())
{
_target = new CanvasRenderingContext2D(s, bitmap, stroke, fill, visible, canvasElement);
_target.OnPartialDraw += new OnPartialDrawHanlder(_target_OnPartialDraw);
//////////
// Add all members with dispids from the concrete type
//////////
base.AddIntrinsicMembers();
_canvasElement = canvasElement;
}
private string sample28(ICanvasRenderingContext2D ctx)
{
Thread.Sleep(interval);
Graphics g = surface.CreateGraphics();
g.Clear(Color.White);
dragon = new FlyingDragon(g, (int) g.VisibleClipBounds.Width, (int) g.VisibleClipBounds.Height,
new Pen(Color.Black, 1), new Fill(Color.Black), interval);
dragon.draw(label);
IsStarted = true;
return string.Empty;
}
public BrowserContext(Control container)
{
// SharpCanvas.Host.Standalone.CreateCanvasElement()
canvas = new SharpCanvas.Host.Browser.CanvasProxy();
// canvas = new SharpCanvas.Host.Browser.HTMLCanvasElement();
// FIXME: These are optional defaults.
canvas.width = 300; canvas.height = 150;
_ctx = (ICanvasRenderingContext2D) canvas.getContext("2d");
if (_ctx == null) throw new System.Exception("Could not fully instantiate Canvas object.");
this.container = container;
}
public object getContext(string contextType)
{
if (contextType == "2d")
{
if (this.context == null)
{
this.context = new CanvasRenderingContext2D(this.window, this);
}
return(this.context);
}
return(null);
}
private string sample17(ICanvasRenderingContext2D ctx)
{
// create new image object to use as pattern
IImageData img = new ImageData();
img.src = @"wallpaper.png";
// create pattern
object ptrn = ctx.createPattern(img, "repeat");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150);
return @"Originals\Images\sample17.png";
}
private string sample11(ICanvasRenderingContext2D ctx)
{
for (int i = 0; i < 10; i++)
{
ctx.beginPath();
ctx.lineWidth = 1 + i;
ctx.moveTo(5 + i*14, 5);
ctx.lineTo(5 + i*14, 140);
ctx.stroke();
}
return @"Originals\Lines\sample11.png";
}
private string PatternAndTransformation(ICanvasRenderingContext2D ctx)
{
// create new image object to use as pattern
IImageData img = new ImageData();
img.src = @"wallpaper.png";
// create pattern
object ptrn = ctx.createPattern(img, "repeat");
ctx.translate(50, 0);
ctx.rotate(Math.PI*2/(6));
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150);
return @"Originals\Images\PatternAndTransformation.png";
}
private string sample25(ICanvasRenderingContext2D ctx)
{
// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
return @"Originals\Curves\sample25.png";
}
private string CompositeOperationsXOR(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "#0f0";
ctx.strokeStyle = "#0f0";
ctx.shadowColor = "#00f";
ctx.shadowOffsetX = 32;
ctx.shadowOffsetY = 16;
ctx.shadowBlur = 8;
ctx.fillRect(32, 32, 128, 128);
ctx.globalCompositeOperation = "xor";
ctx.fillRect(96, 64, 128, 128);
return @"Originals\Shadows\XOR.png";
}
private string sample18(ICanvasRenderingContext2D ctx)
{
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
//ctx.textAlign = "end";
//ctx.textBaseLine = "bottom";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 35, 30);
return @"Originals\Text\sample18.png";
}
private string sample20(ICanvasRenderingContext2D ctx)
{
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50 + j*100, 50 + i*100);
ctx.fillRect(0, 0, 20, 20);
ctx.restore();
}
}
return @"Originals\Transformations\sample20.png";
}
private string sample8(ICanvasRenderingContext2D ctx)
{
for (int i = 0; i < 6; i++)
{
for (int j = 0; j < 6; j++)
{
ctx.strokeStyle = "rgb(0," + Math.Floor(255 - 42.5*i) + ',' +
Math.Floor(255 - 42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5F + j*25, 12.5F + i*25, 10, 0, Math.PI*2, true);
ctx.stroke();
}
}
return @"Originals\Styles\sample8.png";
}
private void roundedRect(ICanvasRenderingContext2D ctx, double x, double y, double width, double height,
double radius)
{
ctx.beginPath();
ctx.moveTo(x, y + radius);
ctx.lineTo(x, y + height - radius);
ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
ctx.lineTo(x + width - radius, y + height);
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
ctx.lineTo(x + width, y + radius);
ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
ctx.lineTo(x + radius, y);
ctx.quadraticCurveTo(x, y, x, y + radius);
ctx.stroke();
}
private string InvertFilter(ICanvasRenderingContext2D ctx)
{
var di = new DirectoryInfo(Application.StartupPath);
string url = di.Parent.Parent.Parent.FullName + "\\SharpCanvas.Tests\\" + @"Originals\Filters\initial.jpg";
ctx.drawImage(url, 0, 0);
var data = (ImageData) ctx.getImageData(0, 0, 121, 121);
/*
var chain = (FilterChain) ctx.createFilterChain();
var filter = new InvertFilter();
chain.AddFilter(filter);
data.applyFilters(chain);
ctx.putImageData(data, 0, 0);
*/
return @"Originals\Filters\InvertFilter.png";
}
private string Fill(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "#0f0";
ctx.strokeStyle = "#0f0";
ctx.shadowColor = "#00f";
ctx.shadowOffsetX = 32;
ctx.shadowOffsetY = 16;
ctx.shadowBlur = 8;
ctx.moveTo(32, 32);
ctx.lineTo(128, 128);
ctx.lineTo(128, 32);
ctx.lineTo(32, 128);
ctx.fill();
return @"Originals\Shadows\Fill.png";
}
private string sample13(ICanvasRenderingContext2D ctx)
{
var lineJoin = new[] {"round", "bevel", "miter"};
ctx.lineWidth = 10;
for (int i = 0; i < lineJoin.Length; i++)
{
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5, 5 + i*40);
ctx.lineTo(35, 45 + i*40);
ctx.lineTo(75, 5 + i*40);
ctx.lineTo(115, 45 + i*40);
ctx.lineTo(155, 5 + i*40);
ctx.stroke();
}
return @"Originals\Lines\sample13.png";
}
private string Composite(ICanvasRenderingContext2D ctx, string compositeType)
{
// draw rectangle
ctx.fillStyle = "#09f";
ctx.fillRect(15, 15, 70, 70);
// set composite property
ctx.globalCompositeOperation = compositeType;
// draw circle
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75, 75, 35, 0, Math.PI*2, true);
ctx.fill();
ctx.commit();
return @"Originals\Compositions\" + compositeType + ".png";
}
private string sample15(ICanvasRenderingContext2D ctx)
{
// Create gradients
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, "#00ABEB");
lingrad.addColorStop(0.5, "#fff");
lingrad.addColorStop(0.5, "#26C000");
lingrad.addColorStop(1, "#fff");
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = lingrad;
ctx.fillRect(10, 10, 130, 130);
ctx.strokeStyle = lingrad2;
ctx.strokeRect(50, 50, 50, 50);
return @"Originals\Gradients\sample15.png";
}
private string ArcTo10(ICanvasRenderingContext2D ctx)
{
int x0 = 200, x1 = 250, x2 = 150, x3 = 200, y = 10, y3 = 80;
int y2 = 10;
int r = 10;
disc(ctx, x0, y, 4, "red");
disc(ctx, x1, y, 4, "red");
disc(ctx, x2, y + y2, 4, "red");
disc(ctx, x3, y3, 4, "green");
line(ctx, x0, y, x1, y, 1, "blue");
line(ctx, x1, y, x2, y + y2, 1, "blue");
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(x0, y);
ctx.arcTo(x1, y, x2, y + y2, r);
ctx.lineTo(x3, y3);
ctx.stroke();
return @"Originals\Shapes\ArcTo10.png";
}
private void drawSpirograph(ICanvasRenderingContext2D ctx, double R, double r, double O)
{
double x1 = R - O;
double y1 = 0;
int i = 1;
double x2, y2;
ctx.beginPath();
ctx.moveTo(x1, y1);
do
{
if (i > 20000) break;
double angle = i*Math.PI/72;
x2 = (R + r)*Math.Cos(angle) - (r + O)*Math.Cos(((R + r)/r)*angle);
y2 = (R + r)*Math.Sin(angle) - (r + O)*Math.Sin(((R + r)/r)*angle);
ctx.lineTo(x2, y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R - O && y2 != 0);
ctx.stroke();
}
private string sample19(ICanvasRenderingContext2D ctx)
{
ctx.fillRect(0, 0, 150, 150); // draw a rectangle with default settings
ctx.save(); // save the default state
ctx.fillStyle = "#09F"; // Make changes to the settings
ctx.fillRect(15, 15, 120, 120); // Draw a rectangle with new settings
ctx.save(); // save the current state
ctx.fillStyle = "#FFF"; // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30, 30, 90, 90); // Draw a rectangle with new settings
ctx.restore(); // restore previous state
ctx.fillRect(45, 45, 60, 60); // Draw a rectangle with restored settings
ctx.restore(); // restore original state
ctx.fillRect(60, 60, 30, 30); // Draw a rectangle with restored settings
return @"Originals\SaveRestore\sample19.png";
}
