Ticket #6083 (closed defect: fixed)

Opened 9 months ago

Last modified 2 months ago

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

Change History

Changed 9 months ago by guest


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


Changed 9 months ago by peller

  • summary changed from Silverlight renderer has problems with radial gradients. to [patch][cla]Silverlight renderer has problems with radial gradients.
  • milestone changed from 1.1.1 to 1.1

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.

Changed 8 months ago by elazutkin

  • priority changed from low to normal
  • status changed from new to assigned
  • milestone changed from 1.1 to 1.1.1

Changed 5 months ago by elazutkin

  • cc bradley.mccandless@… added
  • description modified (diff)

Changed 3 months ago by elazutkin

  • milestone changed from 1.2 to future

Moving all open ticketd to the future.

Changed 3 months ago by elazutkin

  • status changed from assigned to closed
  • resolution set to fixed

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

Changed 2 months ago by bill

  • milestone changed from future to 1.2
Note: See TracTickets for help on using tickets.