/// <summary>
/// Draws the image
/// </summary>
/// <param name="currentDrawingStyle">Draw style used for last element (can allow optimizations, null if unknown)</param>
/// <param name="jsContext2d">Canvas 2d javascript context</param>
/// <param name="xParent">X position of the parent element</param>
/// <param name="yParent">Y position of the parent element</param>
/// <returns>Draw style used for this element (can be null)</returns>
public override ElementStyle Draw(ElementStyle currentDrawingStyle, object jsContext2d, double xParent = 0, double yParent = 0)
{
if (this.Visibility == Visibility.Visible)
{
currentDrawingStyle = this.ApplyStyle(currentDrawingStyle, jsContext2d);
if (this._lastDrawnSource != this._sourceCache ||
this._lastDrawnWidth != this.Width ||
this._lastDrawnHeight != this.Height)
{
Interop.ExecuteJavaScriptAsync(@"
$0.width = $1;
$0.height = $2;
$0.src = $3",
this._jsImage,
this.Width,
this.Height,
this._sourceCache);
this._lastDrawnSource = this._sourceCache;
this._lastDrawnWidth = this.Width;
this._lastDrawnHeight = this.Height;
}
Interop.ExecuteJavaScriptAsync("$0.drawImage($1, $2, $3)", jsContext2d, this._jsImage, this.X + xParent, this.Y + yParent);
}
return(currentDrawingStyle);
}
/// <summary>
/// Draws the rectangle
/// </summary>
/// <param name="currentDrawingStyle">Draw style used for last element (can allow optimizations, null if unknown)</param>
/// <param name="jsContext2d">Canvas 2d javascript context</param>
/// <param name="xParent">X position of the parent element</param>
/// <param name="yParent">Y position of the parent element</param>
/// <returns>Draw style used for this element (can be null)</returns>
public override ElementStyle Draw(ElementStyle currentDrawingStyle, object jsContext2d, double xParent = 0, double yParent = 0)
{
if (this.Visibility == Visibility.Visible)
{
currentDrawingStyle = this.ApplyStyle(currentDrawingStyle, jsContext2d);
//Interop.ExecuteJavaScript("$0.fillStyle = $1", jsContext2d, this.fillStyle);
Interop.ExecuteJavaScriptAsync("$0.fillRect($1, $2, $3, $4)", jsContext2d, this.X + xParent, this.Y + yParent, this.Width, this.Height);
Interop.ExecuteJavaScriptAsync("$0.strokeRect($1, $2, $3, $4)", jsContext2d, this.X + xParent, this.Y + yParent, this.Width, this.Height);
}
return(currentDrawingStyle);
}
/// <summary>
/// Draws the circle
/// </summary>
/// <param name="currentDrawingStyle">Draw style used for last element (can allow optimizations, null if unknown)</param>
/// <param name="jsContext2d">Canvas 2d javascript context</param>
/// <param name="xParent">X position of the parent element</param>
/// <param name="yParent">Y position of the parent element</param>
/// <returns>Draw style used for this element (can be null)</returns>
public override ElementStyle Draw(ElementStyle currentDrawingStyle, object jsContext2d, double xParent = 0, double yParent = 0)
{
if (this.Visibility == Visibility.Visible)
{
currentDrawingStyle = this.ApplyStyle(currentDrawingStyle, jsContext2d);
Interop.ExecuteJavaScriptAsync("$0.beginPath()", jsContext2d);
Interop.ExecuteJavaScriptAsync("$0.arc($1, $2, $3, $4, $5, $6)", jsContext2d, this.X + xParent, this.Y + yParent, this.Radius, 0.0, Math.PI * 2.0, 0);
Interop.ExecuteJavaScriptAsync("$0.fill()", jsContext2d);
}
return(currentDrawingStyle);
}
/// <summary>
/// Draws the text
/// </summary>
/// <param name="currentDrawingStyle">Draw style used for last element (can allow optimizations, null if unknown)</param>
/// <param name="jsContext2d">Canvas 2d javascript context</param>
/// <param name="xParent">X position of the parent element</param>
/// <param name="yParent">Y position of the parent element</param>
/// <returns>Draw style used for this element (can be null)</returns>
public override ElementStyle Draw(ElementStyle currentDrawingStyle, object jsContext2d, double xParent = 0, double yParent = 0)
{
if (this.Visibility == Visibility.Visible)
{
currentDrawingStyle = this.ApplyStyle(currentDrawingStyle, jsContext2d);
Interop.ExecuteJavaScriptAsync("$0.font = $1", jsContext2d, this.FontHeight.ToString() + "px " + this.Font); //todo: use "InvariantCulture" in the ToString() when supported.
Interop.ExecuteJavaScriptAsync("$0.fillText($1, $2, $3)", jsContext2d, this.Text, this.X + xParent, this.Y + yParent + this.FontHeight);
}
return(currentDrawingStyle);
}
/// <summary>
/// Draws the line
/// </summary>
/// <param name="currentDrawingStyle">Draw style used for last element (can allow optimizations, null if unknown)</param>
/// <param name="jsContext2d">Canvas 2d javascript context</param>
/// <param name="xParent">X position of the parent element</param>
/// <param name="yParent">Y position of the parent element</param>
/// <returns>Draw style used for this element (can be null)</returns>
public override ElementStyle Draw(ElementStyle currentDrawingStyle, object jsContext2d, double xParent = 0, double yParent = 0)
{
if (this.Visibility == Visibility.Visible)
{
currentDrawingStyle = this.ApplyStyle(currentDrawingStyle, jsContext2d);
Interop.ExecuteJavaScriptAsync("$0.beginPath()", jsContext2d);
Interop.ExecuteJavaScriptAsync("$0.moveTo($1, $2)", jsContext2d, this.X1 + xParent, this.Y1 + yParent);
Interop.ExecuteJavaScriptAsync("$0.lineTo($1, $2)", jsContext2d, this.X2 + xParent, this.Y2 + yParent);
Interop.ExecuteJavaScriptAsync("$0.stroke()", jsContext2d);
}
return(currentDrawingStyle);
}
protected HtmlCanvasElement(double X, double Y, ElementStyle Style = null)
{
this.IsHitTestVisible = true;
this.X = X;
this.Y = Y;
if (Style == null)
{
this.Style = ElementStyle.Default;
}
else
{
this.Style = Style;
}
}
/// <summary>
/// Draws the container and its children only if the container is visible.
/// </summary>
/// <param name="currentDrawingStyle">Draw style used for last element (can allow optimizations, null if unknown)</param>
/// <param name="jsContext2d">Canvas 2d javascript context</param>
/// <param name="xParent">X position of the parent element</param>
/// <param name="yParent">Y position of the parent element</param>
/// <returns>Draw style used for this element (can be null)</returns>
public override ElementStyle Draw(ElementStyle currentDrawingStyle, object jsContext2d, double xParent = 0, double yParent = 0)
{
if (this.Visibility == Visibility.Visible)
{
currentDrawingStyle = this.ApplyStyle(currentDrawingStyle, jsContext2d);
Interop.ExecuteJavaScriptAsync("$0.fillRect($1, $2, $3, $4)", jsContext2d, this.X + xParent, this.Y + yParent, this.Width, this.Height);
Interop.ExecuteJavaScriptAsync("$0.strokeRect($1, $2, $3, $4)", jsContext2d, this.X + xParent, this.Y + yParent, this.Width, this.Height);
foreach (HtmlCanvasElement elem in this.Children)
{
currentDrawingStyle = elem.Draw(currentDrawingStyle, jsContext2d, this.X + xParent, this.Y + yParent);
}
}
return(currentDrawingStyle);
}
/// <summary>
/// Render the canvas content
/// </summary>
public void Draw()
{
if (this.IsLoaded)
{
Interop.ExecuteJavaScriptAsync("$0.width = $0.scrollWidth", this._jsCanvas);
Interop.ExecuteJavaScriptAsync("$0.height = $0.scrollHeight", this._jsCanvas);
foreach (HtmlCanvasElement elem in this.Children)
{
this._currentDrawingStyle = elem.Draw(this._currentDrawingStyle, this._jsContext2d);
}
}
else
{
throw new Exception("The 'Draw' method of the HtmlCanvas control can only be called after the control has been added to the Visual Tree. For example, you can register to the Loaded event of the HtmlCanvas and call the Draw method at that moment. To know whether the HtmlCanvas is in the Visual Tree or not, you can read the IsLoaded property of the HtmlCanvas.");
}
}
/// <summary>
/// Apply the element's drawing style (if needed)
/// </summary>
/// <param name="oldStyle">Previous style used to draw</param>
/// <param name="jsContext2d">Canvas 2d javascript context</param>
/// <returns>Current applied style (can be null)</returns>
public ElementStyle ApplyStyle(ElementStyle oldStyle, object jsContext2d)
{
if (this._isStyleOverrided)
{
Interop.ExecuteJavaScriptAsync(@"
$0.fillStyle = $1;
$0.strokeStyle = $2;
$0.shadowColor = $3;
$0.shadowBlur = $4;
$0.shadowOffsetX = $5;
$0.shadowOffsetY = $6;
$0.lineCap = $7;
$0.lineJoin = $8;
$0.lineWidth = $9", jsContext2d,
(this._fillColor != null) ? this._fillStyleStr : this.Style.fillColorStr,
(this._strokeColor != null) ? this._strokeStyleStr : this.Style.strokeColorStr,
(this._shadowColor != null) ? this._shadowColorStr : this.Style.shadowColorStr,
this.ShadowBlur,
this.ShadowOffsetX,
this.ShadowOffsetY,
this.LineCap.ToString().ToLower(),
this.LineJoin.ToString().ToLower(),
this.LineWidth);
// Note: the following is done on a separate line because of a limitation of JSIL where $10 is understood as $1 followed by a 0.
Interop.ExecuteJavaScriptAsync(@"
$0.miterLimit = $1", jsContext2d,
this.MiterLimit);
return(null);
}
else if (this.Style != oldStyle)
{
this.Style.Apply(jsContext2d);
return(this.Style);
}
else
{
return(oldStyle);
}
}
/// <summary> /// Abstract draw method /// </summary> /// <param name="currentDrawingStyle">Draw style used for last element (can allow optimizations, null if unknown)</param> /// <param name="jsContext2d">Canvas 2d javascript context</param> /// <param name="xParent">X position of the parent element</param> /// <param name="yParent">Y position of the parent element</param> /// <returns>Draw style used for this element (can be null)</returns> public abstract ElementStyle Draw(ElementStyle currentDrawingStyle, object jsContext2d, double xParent = 0, double yParent = 0);
// Constructors that cannot directly be called
// You can't instantiate a HtmlCanvasElement, only inherited objects
protected HtmlCanvasElement()
{
this.Style = ElementStyle.Default;
this.IsHitTestVisible = true;
}