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.
107 lines (98 loc) • 2.21 kB
HTML
<html>
<head>
<title>Test SVG Filters</title>
<script>
var dojoConfig = {
async: true,
gfxRenderer: 'svg'
};
</script>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
'dojox/gfx',
'dojox/gfx/svg_mask',
'dojo/domReady!'
], function(gfx){
var surfaceShape = {
width: 600,
height: 600
},
surface = gfx.createSurface('surface', surfaceShape.width, surfaceShape.height);
var group = surface.createGroup();
group.createRect(surfaceShape).setFill('blue');
// Create mask with the same dimensions as the group
var maskShape = {
width: 1,
height: 1,
maskContentUnits: 'objectBoundingBox'
};
var mask = surface.createMask(maskShape);
// By default, the mask is applied as if initialized to black (i.e., #000)
// and will completely mask out objects painted through it.
// Create a white (i.e., #fff) rectangle in the dimensions of the mask
// so no painting is masked out by default.
mask.createRect({
width: 0.5,
height: 1
}).setFill('#fff');
var margin = 0.1;
mask.createRect({
x: margin,
y: margin,
width: .5 - margin * 2,
height: 1 - margin * 2
}).setFill('black');
group.setMask(mask);
var textMargin = 60;
var text = surface.createText({
x: surfaceShape.width / 2 + textMargin,
y: textMargin,
text: 'Masked Text'
})
.setFill('red')
.setStroke('purple')
.setFont({
size: '40px'
});
var maskForText = surface.createMask(maskShape);
maskForText.createRect({
width: 1,
height: 1
})
.setFill({
type: 'linear',
x2: 1,
y2: 0,
colors: [
{ offset: 0, color: '#111' },
{ offset: 1, color: '#ddd' }
]
});
text.setMask(maskForText);
var image = surface.createImage({
x: 300,
y: 100,
width: 300,
height: 300,
src: 'images/maps.png'
});
var textMask = surface.createMask({});
textMask.createText({
x: 375,
y: 250,
text: 'Text Mask'
})
.setFill('white')
.setFont({
size: "40px"
});
image.setMask(textMask);
});
</script>
</head>
<body>
<div id="surface" style="width: 600px; height: 600px; background: #FFFFE0"></div>
</body>
</html>