Opened 8 years ago

Closed 6 years ago

#13928 closed enhancement (fixed)

[patch][CCLA]Add SVG Filters api to GFX

Reported by: Chris Mitchell Owned by: Patrick Ruzand
Priority: high Milestone: 1.9
Component: DojoX GFX Version: 1.6.1
Keywords: 1.9 Cc: Patrick Ruzand, Eugene Lazutkin
Blocked By: Blocking: #14357

Description (last modified by Patrick Ruzand)

This patch adds support for the SVG Filter API in the gfx SVG renderer only, by:

  • adding a new Shape.setFilter() method
  • providing a minimal helper api to create filters conform to the spec
  • providing a set of 52 predefined filters grouped by category (blurs, shadows, colors, textures, convolutions, miscs and reliefs)

1/ The Shape.setFilter() API is implemented in the dojox/gfx/svgext module, since it's a SVG-specific api.

The raw implementation of a filter is an object defined as:

  var filter = {
    // filter specific properties like id, x, y, width, etc.
    "id":"myFilter",
    ...
    // an array of filter primitives
    primitives:[
       // ex: a feGaussian primitive
       {
          "tag":"feGaussian",
          "in": "SourceAlpha",
          "stdDeviation":"4",
          "result":"blur"
	}
        ...
    ]
  }

To make easier writing filters, a helper api is defined (see below).

2/ A new dojox/gfx/filters module is created, and contains the helper api and the filter library.

The helper API is a minimal (on purpose) api whose purpose is to simplify the creation of filter. It consists on:

  • the filters.create(/*Object*/config, /*Array*/primitives) function, which returns a filter object populated with the specified primitives.
  • additional functions for every filter primitives defined in the SVG spec, whose name matches the primitives name. The signature of such a function is in the form:

filters.feFoo(/*Object*/properties, /*Array?*/ children)

where propertie defines the primitive properties as per the spec, and children defines an optional array of child primitive (see the spec. for more information).

For example, writing a simple "glow" effect gives:

filters.createFilter({
		x:"-10%",
		y:"-10%",
		width:"120%",
		height:"120%"
	},[
		filters.feGaussianBlur({
			"in": "SourceGraphic",
			"stdDeviation": 2
		}),
		filters.feComponentTransfer([
			filters.feFuncA({
				"type":"linear",
				"slope":10
			})
		])
	])

Finally, the dojox/gfx/filters module also defines a set of 52 predefined filters, grouped by category, and exported as functions. For example, the following code sets a "Swirl" filter on a rect:

  rect.setFilter(filters.textures.swirl({id:"myFilter",x:0,y:0,width:100,height:100}));

Attachments (1)

13928.patch (31.7 KB) - added by Patrick Ruzand 6 years ago.
patch by pruzand (IBM, CCLA)

Download all attachments as: .zip

Change History (17)

comment:1 Changed 8 years ago by bill

Owner: changed from eugene to Eugene Lazutkin

comment:2 Changed 8 years ago by Chris Mitchell

Type: defectenhancement

comment:3 Changed 8 years ago by Chris Mitchell

Milestone: tbd1.8

comment:4 Changed 8 years ago by cjolif

Blocking: 14357 added

comment:5 Changed 8 years ago by Patrick Ruzand

Owner: changed from Eugene Lazutkin to Patrick Ruzand
Status: newassigned

comment:6 Changed 7 years ago by cjolif

Blocking: 14357 added

comment:7 Changed 7 years ago by Patrick Ruzand

Milestone: 1.81.9

comment:8 Changed 7 years ago by Colin Snover

Milestone: 1.92.0

Current plan is that we are going from 1.8 to 2.0, so bulk reassigning and removing the 1.9 milestone so nobody tries to use it.

comment:9 Changed 7 years ago by Colin Snover

Keywords: 1.9 added

comment:10 Changed 6 years ago by Patrick Ruzand

Milestone: 2.01.9

comment:11 Changed 6 years ago by Patrick Ruzand

Description: modified (diff)

Changed 6 years ago by Patrick Ruzand

Attachment: 13928.patch added

patch by pruzand (IBM, CCLA)

comment:12 Changed 6 years ago by Patrick Ruzand

Summary: Add SVG Filters api to GFX[patch][CCLA]Add SVG Filters api to GFX

comment:13 Changed 6 years ago by Patrick Ruzand

Note: the patch needs code style cleanup, but wanted to be sure uhop got it asap.

comment:14 Changed 6 years ago by Eugene Lazutkin

Cc: Eugene Lazutkin added

comment:15 Changed 6 years ago by Eugene Lazutkin

The functionality and its interface looks fine.

comment:16 Changed 6 years ago by Patrick Ruzand

Resolution: fixed
Status: assignedclosed

In [30904]:

add SVG Filters api to gfx, fixes #13928

Note: See TracTickets for help on using tickets.