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

SvgPolygon。

Browse Source
This commit is contained in:
liteng 2018-11-03 20:22:42 +08:00
parent 1c4d337b33
commit 9304c090c9
6 changed files with 113 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ShadowEditor.SVG/dist/ShadowEditor.SVG.js vendored
View File

@ -354,6 +354,38 @@
this.parent.appendChild(this.dom);
};
/**
* SVG面
* @author tengge / https://github.com/tengge1
* @param {*} options
*/
function SvgPolygon(options = {}) {
SvgControl.call(this, options);
}
SvgPolygon.prototype = Object.create(SvgControl.prototype);
SvgPolygon.prototype.constructor = SvgPolygon;
SvgPolygon.prototype.render = function () {
this.dom = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
if (this.attr) {
Object.keys(this.attr).forEach(n => {
this.dom.setAttribute(n, this.attr[n]);
});
}
if (this.style) {
Object.assign(this.dom.style, this.style);
}
if (this.listeners) {
Object.assign(this.dom, this.listeners);
}
this.parent.appendChild(this.dom);
};
/**
* SVG类
* @author tengge / https://github.com/tengge1
@ -482,6 +514,7 @@
SvgEllipse: SvgEllipse,
SvgLine: SvgLine,
SvgPolyline: SvgPolyline,
SvgPolygon: SvgPolygon,
});
// 添加所有SVG控件的XType
@ -493,6 +526,7 @@
SVG$1.addXType('svgellipse', SvgEllipse);
SVG$1.addXType('svgline', SvgLine);
SVG$1.addXType('svgpolyline', SvgPolyline);
SVG$1.addXType('svgpolygon', SvgPolygon);
window.SVG = SVG$1;

3
ShadowEditor.SVG/src/SVG.js
View File

@ -6,6 +6,7 @@ import SvgRect from './SvgRect';
import SvgEllipse from './SvgEllipse';
import SvgLine from './SvgLine';
import SvgPolyline from './SvgPolyline';
import SvgPolygon from './SvgPolygon';
/**
* SVG类
@ -135,6 +136,7 @@ Object.assign(SVG, {
SvgEllipse: SvgEllipse,
SvgLine: SvgLine,
SvgPolyline: SvgPolyline,
SvgPolygon: SvgPolygon,
});
// 添加所有SVG控件的XType
@ -146,6 +148,7 @@ SVG.addXType('svgrect', SvgRect);
SVG.addXType('svgellipse', SvgEllipse);
SVG.addXType('svgline', SvgLine);
SVG.addXType('svgpolyline', SvgPolyline);
SVG.addXType('svgpolygon', SvgPolygon);
window.SVG = SVG;

35
ShadowEditor.SVG/src/SvgPolygon.js Normal file
View File

@ -0,0 +1,35 @@
import SvgControl from './SvgControl';
/**
* SVG面
* @author tengge / https://github.com/tengge1
* @param {*} options
*/
function SvgPolygon(options = {}) {
SvgControl.call(this, options);
}
SvgPolygon.prototype = Object.create(SvgControl.prototype);
SvgPolygon.prototype.constructor = SvgPolygon;
SvgPolygon.prototype.render = function () {
this.dom = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
if (this.attr) {
Object.keys(this.attr).forEach(n => {
this.dom.setAttribute(n, this.attr[n]);
});
}
if (this.style) {
Object.assign(this.dom.style, this.style);
}
if (this.listeners) {
Object.assign(this.dom, this.listeners);
}
this.parent.appendChild(this.dom);
};
export default SvgPolygon;

25
ShadowEditor.SVG/src/svg/element/SvgPolygon.js
View File

@ -1,25 +0,0 @@
import { SvgElement } from './SvgElement';
/**
* @author tengge / https://github.com/tengge1
*/
function SvgPolygon(options) {
SvgElement.call(this, options);
options = options || {};
this.points = options.points || '0,0,100,0,100,100,0,100';
this.stroke = options.stroke || 'red';
this.strokeWidth = options.strokeWidth || 2;
this.fill = options.fill || 'yellow';
}
SvgPolygon.prototype = Object.create(SvgElement.prototype);
SvgPolygon.prototype.constructor = SvgPolygon;
SvgPolygon.prototype.render = function() {
this.parent.append('polygon')
.attr('points', this.points)
.call(this.renderStyle, this);
};
export { SvgPolygon };

25
ShadowEditor.SVG/src/svg/element/SvgPolyline.js
View File

@ -1,25 +0,0 @@
import { SvgElement } from './SvgElement';
/**
* @author tengge / https://github.com/tengge1
*/
function SvgPolyline(options) {
SvgElement.call(this, options);
options = options || {};
this.points = options.points || '0,0,100,100,150,100,150,150';
this.stroke = options.stroke === undefined ? 'red' : options.stroke;
this.strokeWidth = options.strokeWidth || 2;
this.fill = options.fill || 'none';
}
SvgPolyline.prototype = Object.create(SvgElement.prototype);
SvgPolyline.prototype.constructor = SvgPolyline;
SvgPolyline.prototype.render = function() {
this.parent.append('polyline')
.attr('points', this.points)
.call(this.renderStyle, this);
};
export { SvgPolyline };

41
ShadowEditor.SVG/test/07 SvgPolygonTest.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>07 SvgPolygonTest</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 svg = SVG.create({
xtype: 'svgdom',
id: 'svg1',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'svgpolygon',
attr: {
points: [0, 0, 10, 30, 40, 60, 200, 100],
stroke: '#f00',
'stroke-width': 2,
fill: '#f00'
},
listeners: {
onclick: () => {
alert('You clicked!');
}
}
}]
});
svg.render();
</script>
</body>
</html>