dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
106 lines (100 loc) • 3.07 kB
HTML
<html>
<head>
<title>Test SVG Filters</title>
</head>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/_base/array",
"dojox/gfx",
"dojox/gfx/matrix",
"dojox/gfx/filters",
"dojox/gfx/svgext"
], function(ready, array, gfx, matrix, filters){
var surface;
function makeShape(filter, title){
var topg = surface.createGroup();
var g = topg.createGroup();
g.createPath({path:"M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z"}).setStroke({color:"#0000D9",width:10});
g.createPath({path:"M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z"}).setFill("#D90000");
g.createGroup().createText({x:52, y:76, text:"SVG"}).setFill("white").setFont({family:"verdana", size:45});
if(filter){
g.setFilter(filter);
}
topg.createText({x:100, y:140, text: title, align:"middle"}).setFill("black").setFont({family:"verdana", size:20});
var tooltip = document.createElementNS("http://www.w3.org/2000/svg", "title");
tooltip.appendChild(document.createTextNode(title));
topg.rawNode.appendChild(tooltip);
return topg;
}
ready(function(){
surface = gfx.createSurface("canvas", 800, 900);
var count = 0;
makeShape(null, "none").setTransform(matrix.scale(.65,.65));
array.forEach(["convolutions", "blurs", "colors", "miscs", "shadows", "textures", "reliefs"], function(lib){
for(var func in filters[lib]){
++count;
var f = filters[lib][func];
var s = makeShape(f(), func);
s.setTransform([matrix.translate((count%6)*132, Math.floor(count/6)*90), matrix.scale(.65,.65)]);
}
});
var customFilter = filters.createFilter({
// no id to test id auto assignment
x: 0, y:0, width:200, height:120
},[
filters.feGaussianBlur({
"in": "SourceAlpha",
"stdDeviation":"4",
"result":"blur"
}),
filters.feOffset({
"in":"blur",
"dx":4,
"dy":4,
"result":"offsetBlur"
}),
filters.feSpecularLighting({
"in":"blur",
"surfaceScale":5,
"specularConstant":.75,
"specularExponent":20,
"lighting-color":"#bbbbbb",
"result":"specOut"
}, [filters.fePointLight({
x:-5000,
y:-10000,
z:20000
})]),
filters.feComposite({
"in":"specOut",
"in2":"SourceAlpha",
"operator":"in",
"result":"specOut"
}),
filters.feComposite({
"in":"SourceGraphic",
"in2":"specOut",
"operator":"arithmetic",
k1:0,
k2:1,
k3:1,
k4:0,
"result":"litPaint"
}),
filters.feMerge("offsetBlur","litPaint")
]);
++count;
makeShape(customFilter,"custom").setTransform([matrix.translate((count%6)*132, Math.floor(count/6)*90), matrix.scale(.65,.65)]);
++count;
makeShape(customFilter,"none").setTransform([matrix.translate((count%6)*132, Math.floor(count/6)*90), matrix.scale(.65,.65)])
.children[0].setFilter(null);
});
});
</script>
<body>
<div id="canvas" style="width:800px;height:900px"></div>
</body>
</html>