Opened 12 years ago

Closed 11 years ago

Last modified 11 years ago

#6083 closed defect (fixed)

[patch][cla]Silverlight renderer has problems with radial gradients.

Reported by: guest Owned by: Eugene Lazutkin
Priority: high Milestone: 1.2
Component: DojoX GFX Version: 1.1b1
Keywords: silverlight gfx radial gradient Cc: bradley.mccandless@…
Blocked By: Blocking:

Description (last modified by Eugene Lazutkin)

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;

Change History (7)

comment:1 Changed 12 years ago by guest


Submitted by bradley mccandless. email bradley dott mccandless att gmail dott com.


comment:2 Changed 12 years ago by Adam Peller

Milestone: 1.1.11.1
Summary: Silverlight renderer has problems with radial gradients.[patch][cla]Silverlight renderer has problems with radial gradients.

Thanks, Bradley. Eugene, I'll put this in 1.1 since there's a patch, but feel free to bump to 1.2 if there isn't time. We're going to try to keep the dot release limited to emergency fixes this time around.

comment:3 Changed 12 years ago by Eugene Lazutkin

Milestone: 1.11.1.1
Priority: lownormal
Status: newassigned

comment:4 Changed 11 years ago by Eugene Lazutkin

Cc: bradley.mccandless@… added
Description: modified (diff)

comment:5 Changed 11 years ago by Eugene Lazutkin

Milestone: 1.2future

Moving all open ticketd to the future.

comment:6 Changed 11 years ago by Eugene Lazutkin

Resolution: fixed
Status: assignedclosed

(In [15150]) Fixes #6083 - the radial gradient problem, thx Bradley McCandless?! The real fix turned out to be more complex. !strict

comment:7 Changed 11 years ago by bill

Milestone: future1.2
Note: See TracTickets for help on using tickets.