archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

各种测试。

Browse Source
This commit is contained in:
liteng 2018-11-08 21:31:10 +08:00
parent e452f3b248
commit bcf00deff9
9 changed files with 195 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ShadowEditor.SVG/test/10 AnchorTest.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>10 AnchorTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = Shadow.SVG.create({
xtype: 'svg',
parent: document.body,
attr: {
width: 140,
height: 30,
},
children: [{
xtype: 'a',
attr: {
href: 'https://developer.mozilla.org/en-US/docs/SVG',
target: '_blank',
},
children: [{
xtype: 'rect',
attr: {
x: 0,
y: 0,
width: 120,
height: 30,
rx: 15
}
}, {
xtype: 'text',
attr: {
fill: 'white',
'text-anchor': 'middle',
x: 60,
y: 21,
},
html: 'SVG on MDN'
}]
}]
});
dom.render();
</script>
</body>
</html>

57
ShadowEditor.SVG/test/11 GaussianBlurTest.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>11 GaussianBlurTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = Shadow.SVG.create({
xtype: 'svg',
parent: document.body,
attr: {
width: 230,
height: 120,
},
children: [{
xtype: 'filter',
attr: {
id: 'blurMe'
},
children: [{
xtype: 'fegaussianblur',
attr: {
in: 'SourceGraphic',
stdDeviation: 5
}
}]
}, {
xtype: 'circle',
attr: {
cx: 60,
cy: 60,
r: 50,
fill: 'green'
}
}, {
xtype: 'circle',
attr: {
cx: 170,
cy: 60,
r: 50,
fill: 'green',
filter: 'url(#blurMe)'
}
}]
});
dom.render();
</script>
</body>
</html>

67
ShadowEditor.SVG/test/12 OffsetBlurTest.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>12 OffsetBlurTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = Shadow.SVG.create({
xtype: 'svg',
parent: document.body,
attr: {
width: 200,
height: 200,
},
children: [{
xtype: 'defs',
children: [{
xtype: 'filter',
attr: {
id: 'offset',
width: 180,
height: 180,
},
children: [{
xtype: 'feoffset',
attr: {
in: 'SourceGraphic',
dx: 60,
dy: 60
}
}]
}]
}, {
xtype: 'rect',
attr: {
x: 0,
y: 0,
width: 100,
height: 100,
stroke: 'black',
fill: 'green',
}
}, {
xtype: 'rect',
attr: {
x: 0,
y: 0,
width: 100,
height: 100,
stroke: 'black',
fill: 'green',
filter: 'url(#offset)'
}
}]
});
dom.render();
</script>
</body>
</html>

21
ShadowEditor.SVG/test2/14 SvgColorMatrixTest.html → ShadowEditor.SVG/test/13 ColorMatrixTest.html
View File

@ -4,25 +4,24 @@
<head>
<meta charset="utf-8">
<title>14 SvgColorMatrixTest</title>
<title>13 ColorMatrixTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
var dom = Shadow.SVG.create({
xtype: 'svg',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'svgdefs',
xtype: 'defs',
children: [{
xtype: 'svgfilter',
xtype: 'filter',
attr: {
id: 'filter1',
x: 0,
@ -31,7 +30,7 @@
height: '200%'
},
children: [{
xtype: 'svgfeoffset',
xtype: 'feoffset',
attr: {
result: 'offOut',
in: 'SourceGraphic',
@ -39,7 +38,7 @@
dy: 20
}
}, {
xtype: 'svgfecolormatrix',
xtype: 'fecolormatrix',
attr: {
result: 'matrixOut',
in: 'offOut',
@ -47,14 +46,14 @@
values: '0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0'
}
}, {
xtype: 'svgfegaussianblur',
xtype: 'fegaussianblur',
attr: {
result: 'blurOut',
in: 'matrixOut',
stdDeviation: 10
}
}, {
xtype: 'svgfeblend',
xtype: 'feblend',
attr: {
in: 'SourceGraphic',
in2: 'blurOut',
@ -63,7 +62,7 @@
}]
}]
}, {
xtype: 'svgrect',
xtype: 'rect',
attr: {
x: 10,
y: 10,

15
ShadowEditor.SVG/test2/15 SvgGroupTest.html → ShadowEditor.SVG/test/14 GroupTest.html
View File

@ -4,36 +4,37 @@
<head>
<meta charset="utf-8">
<title>15 SvgGroupTest</title>
<title>14 GroupTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
var dom = Shadow.SVG.create({
xtype: 'svg',
parent: document.body,
attr: {
width: 400,
height: 400,
viewBox: '0 0 100 100'
},
children: [{
xtype: 'svggroup',
xtype: 'g',
attr: {
fill: 'white',
stroke: 'green',
strokeWidth: 5
},
children: [{
xtype: 'svgcircle',
xtype: 'circle',
attr: {
cx: 40,
cy: 40,
r: 25
}
}, {
xtype: 'svgcircle',
xtype: 'circle',
attr: {
cx: 60,
cy: 60,

45
ShadowEditor.SVG/test2/10 SvgATest.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>09 SvgTextTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'svga',
attr: {
href: 'http://www.baidu.com',
target: '_blank',
},
children: [{
xtype: 'svgrect',
attr: {
x: 30,
y: 30,
width: 100,
height: 80,
fill: '#f00'
}
}]
}]
});
dom.render();
</script>
</body>
</html>

64
ShadowEditor.SVG/test2/11 SvgPathTest.html
View File

@ -1,64 +0,0 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>11 SvgPathTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'svgdefs',
children: [{
xtype: 'svgpath',
attr: {
id: 'path1',
d: 'M75,20 a1,1 0 0,0 100,0',
fill: 'none'
}
}]
}, {
xtype: 'svguse',
attr: {
'xlink:href': '#path1',
stroke: '#f00'
}
}, {
xtype: 'svgtext',
attr: {
x: 10,
y: 100,
fill: '#f00'
},
children: [{
xtype: 'svgtextpath',
html: 'I Love SVG. I Love SVG.',
attr: {
'xlink:href': '#path1'
}
}],
listeners: {
click: () => {
alert('You clicked!');
}
}
}]
});
dom.render();
</script>
</body>
</html>

56
ShadowEditor.SVG/test2/12 SvgGaussianBlurTest.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>12 SvgGaussianBlurTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'svgdefs',
children: [{
xtype: 'svgfilter',
attr: {
id: 'filter1'
},
children: [{
xtype: 'svgfegaussianblur',
attr: {
in: 'SourceGraphic',
stdDeviation: 20
}
}]
}]
}, {
xtype: 'svgrect',
attr: {
x: 10,
y: 10,
width: 100,
height: 80,
fill: '#f00',
stroke: '#0f0',
'stroke-width': 2,
filter: 'url(#filter1)'
}
}]
});
dom.render();
</script>
</body>
</html>

69
ShadowEditor.SVG/test2/13 SvgOffsetBlurTest.html
View File

@ -1,69 +0,0 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>13 SvgOffsetBlurTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'svgdefs',
children: [{
xtype: 'svgfilter',
attr: {
id: 'filter1',
x: 0,
y: 0,
width: '200%',
height: '200%'
},
children: [{
xtype: 'svgfeoffset',
attr: {
result: 'offOut',
in: 'SourceGraphic',
dx: 20,
dy: 20
}
}, {
xtype: 'svgfeblend',
attr: {
in: 'SourceGraphic',
in2: 'offOut',
mode: 'normal'
}
}]
}]
}, {
xtype: 'svgrect',
attr: {
x: 10,
y: 10,
width: 100,
height: 80,
fill: '#f00',
stroke: '#0f0',
'stroke-width': 2,
filter: 'url(#filter1)'
}
}]
});
dom.render();
</script>
</body>
</html>