Ticket #6083 (closed defect: fixed)
[patch][cla]Silverlight renderer has problems with radial gradients.
| Reported by: | guest | Owned by: | elazutkin |
|---|---|---|---|
| Priority: | normal | Milestone: | 1.2 |
| Component: | DojoX GFX | Version: | 1.1b1 |
| Severity: | normal | Keywords: | silverlight gfx radial gradient |
| Cc: | bradley.mccandless@… |
Description (last modified by elazutkin) (diff)
Two things that came up:
(1) The gradient for an off-center fill has a non-symmetrical distribution (any shape)
(2) Attaching gradients to paths throws and error and stops the script
Problem (1) is due to the fact that the default gradient origin is always in the center of the shape. See radialGradientBrush.
Problem (2) is due to the fact that the Silverlight renderer (JS) requires to know the width and height of an object to determine properties relatively. This is not possible using Silverlight (Runtime) and Paths:
"For best performance, avoid explicitly setting the Width and Height of a Path. Setting the Width and Height will result in additional stretching, which has a performance cost. Instead, rely on the explicitly set coordinates of the Path and its contained data to control its shape and position. In effect, the Path will have a natural height and width, although those values are not reported to the object model." (Silverlight Runtime Reference 1.0)
Problem (1) can be solved by attaching the property gradientOrigin to radialGradientBrush, where
GradientOrigin = Center
Problem (2) can be solved by using absolute references for the gradient center and radius. SL allows this if you set the following in radialGradientBrush:
MappingMode = Absolute
The specific change in silverlight.js could be something like (line 83):
case "radial":
this.fillStyle = f = dojox.gfx.makeParameters(dojox.gfx.defaultRadialGradient, fill);
var rgb = p.createFromXaml("<RadialGradientBrush/>"),
l = this.rawNode["Canvas.Left"], t = this.rawNode["Canvas.Top"];
rgb.gradientorigin = rgb.center = (f.cx - l) + "," + (f.cy - t);
rgb.radiusY = rgb.radiusX = f.r;
dojo.forEach(f.colors, function(c){
var t = p.createFromXaml("<GradientStop/>");
t.offset = c.offset;
t.color = dojox.gfx.silverlight.hexColor(c.color);
rgb.gradientStops.add(t);
});
rgb.mappingmode = "absolute";
this._setFillAttr(rgb);
break;