(function (window) {
|
|
Element.prototype.setAttr = function () {
|
try {
|
if (arguments == undefined) {
|
return;
|
}
|
if (arguments.length == 1 && arguments[0] ) {
|
for (var name in arguments[0]) {
|
if(arguments[0][name])
|
this.setAttribute(name, arguments[0][name]);
|
else
|
console.log(arguments[0],name)
|
}
|
} else if (arguments.length == 2) {
|
// this.setAttribute(arguments[0], arguments[1]);
|
if (arguments[1].toString().indexOf("NaN") > 0) {
|
return this;
|
}
|
else {
|
this.setAttribute(arguments[0], arguments[1]);
|
}
|
}
|
return this;
|
}
|
catch (err) {
|
alert(err);
|
}
|
};
|
|
Element.prototype.setStyle = function () {
|
if (arguments.length == 1) {
|
for (var name in arguments[0]) {
|
this.style[name] = arguments[0][name];
|
}
|
} else if (arguments.length == 2) {
|
this.style[arguments[0]] = arguments[1];
|
}
|
return this;
|
};
|
|
Element.prototype.html = function (html) {
|
if (html != null) {
|
this.innerHTML = html;
|
return this;
|
} else {
|
return this.innerHTML;
|
}
|
};
|
|
Element.prototype.createKey = function (key) {
|
if (!key)
|
return this;
|
this.setAttr("id", key);
|
return this;
|
};
|
|
Element.prototype.on = function (type, callback) {
|
if (this.addEventListener) {
|
this.addEventListener(type, callback, false);
|
}
|
else if (this.attachEvent) {
|
this.attachEvent('on' + type, function () {
|
return callback.call(this, window.event);
|
});
|
}
|
|
};
|
|
//计算像素值
|
var calculateValue = function () {
|
|
this.bezierCurveOpen = function (point) {
|
if (point == null || point.length < 4)
|
return null;
|
|
var iPointCout = point.length;
|
var a = 0.09;
|
var b = 0.09;
|
var controlPoint = [];
|
|
for (var i = 0; i < iPointCout - 1; i++) {
|
var bezier = {};
|
bezier.Point0 = point[i];
|
if (i == 0) {
|
var x1 = point[i].X + a * (point[i + 1].X - point[i].X);
|
var y1 = point[i].Y + a * (point[i + 1].Y - point[i].Y);
|
bezier.Point1 = {
|
"X": x1,
|
"Y": y1
|
};
|
}
|
else {
|
var x1 = point[i].X + a * (point[i + 1].X - point[i - 1].X);
|
var y1 = point[i].Y + a * (point[i + 1].Y - point[i - 1].Y);
|
bezier.Point1 = {
|
"X": x1,
|
"Y": y1
|
}
|
}
|
|
if (i == iPointCout - 2) {
|
var x2 = point[i + 1].X - b * (point[i + 1].X - point[i].X);
|
var y2 = point[i + 1].Y - b * (point[i + 1].Y - point[i].Y);
|
bezier.Point2 = {
|
"X": x2,
|
"Y": y2
|
}
|
}
|
else {
|
var x2 = point[i + 1].X - b * (point[i + 2].X - point[i].X);
|
var y2 = point[i + 1].Y - b * (point[i + 2].Y - point[i].Y);
|
bezier.Point2 = {
|
"X": x2,
|
"Y": y2
|
}
|
}
|
|
bezier.Point3 = point[i + 1];
|
controlPoint.push(bezier);
|
}
|
return controlPoint;
|
};
|
|
this.getActualValue = function (actualMinValue, actualMaxValue, pixelMinValue, pixelMaxValue, pixelValue) {
|
var
|
actual = null;
|
actual = (pixelValue - pixelMinValue) / (pixelMaxValue - pixelMinValue) * (actualMaxValue - actualMinValue) + actualMinValue;
|
// actual = (pixelValue - pixelMinValue) / (pixelMaxValue - pixelMinValue) * (actualMaxValue - actualMinValue) + pixelMinValue;
|
return actual;
|
};
|
|
this.getMinValue = function (values, index) {
|
var
|
minValue = null;
|
if (index == null) {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
minValue = parseFloat(values[i]);
|
} else {
|
if (minValue > parseFloat(values[i])) {
|
minValue = parseFloat(values[i]);
|
}
|
}
|
}
|
} else {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
minValue = parseFloat(values[i][index]);
|
} else {
|
if (minValue > parseFloat(values[i][index])) {
|
minValue = parseFloat(values[i][index]);
|
}
|
}
|
}
|
}
|
return minValue;
|
};
|
|
this.getMaxValue = function (values, index) {
|
var
|
maxValue = null;
|
if (index == null) {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
maxValue = parseFloat(values[i]);
|
} else {
|
if (maxValue < parseFloat(values[i])) {
|
maxValue = parseFloat(values[i]);
|
}
|
}
|
}
|
} else {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
maxValue = parseFloat(values[i][index]);
|
} else {
|
if (maxValue < parseFloat(values[i][index])) {
|
maxValue = parseFloat(values[i][index]);
|
}
|
}
|
}
|
}
|
return maxValue;
|
};
|
|
this.getPixelValue = function (actualValue, actualMinValue, actualMaxValue, pixelMinValue, pixelMaxValue) {
|
return (actualValue - actualMinValue) / (actualMaxValue - actualMinValue) * (pixelMaxValue - pixelMinValue) + pixelMinValue;
|
};
|
|
};
|
|
//计算像素值
|
var calculateValueLog = function () {
|
|
this.bezierCurveOpen = function (point) {
|
if (point == null || point.length < 4)
|
return null;
|
|
var iPointCout = point.length;
|
var a = 0.09;
|
var b = 0.09;
|
var controlPoint = [];
|
|
for (var i = 0; i < iPointCout - 1; i++) {
|
var bezier = {};
|
bezier.Point0 = point[i];
|
if (i == 0) {
|
var x1 = point[i].X + a * (point[i + 1].X - point[i].X);
|
var y1 = point[i].Y + a * (point[i + 1].Y - point[i].Y);
|
bezier.Point1 = {
|
"X": x1,
|
"Y": y1
|
};
|
}
|
else {
|
var x1 = point[i].X + a * (point[i + 1].X - point[i - 1].X);
|
var y1 = point[i].Y + a * (point[i + 1].Y - point[i - 1].Y);
|
bezier.Point1 = {
|
"X": x1,
|
"Y": y1
|
}
|
}
|
|
if (i == iPointCout - 2) {
|
var x2 = point[i + 1].X - b * (point[i + 1].X - point[i].X);
|
var y2 = point[i + 1].Y - b * (point[i + 1].Y - point[i].Y);
|
bezier.Point2 = {
|
"X": x2,
|
"Y": y2
|
}
|
}
|
else {
|
var x2 = point[i + 1].X - b * (point[i + 2].X - point[i].X);
|
var y2 = point[i + 1].Y - b * (point[i + 2].Y - point[i].Y);
|
bezier.Point2 = {
|
"X": x2,
|
"Y": y2
|
}
|
}
|
|
bezier.Point3 = point[i + 1];
|
controlPoint.push(bezier);
|
}
|
return controlPoint;
|
};
|
|
this.getActualValue = function (actualMinValue, actualMaxValue, pixelMinValue, pixelMaxValue, pixelValue) {
|
var
|
actual = null;
|
actual = (pixelValue - pixelMinValue) / (pixelMaxValue - pixelMinValue) * (actualMaxValue - actualMinValue) + actualMinValue;
|
// actual = (pixelValue - pixelMinValue) / (pixelMaxValue - pixelMinValue) * (actualMaxValue - actualMinValue) + pixelMinValue;
|
return actual;
|
};
|
|
this.getMinValue = function (values, index) {
|
var
|
minValue = null;
|
if (index == null) {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
minValue = parseFloat(values[i]);
|
} else {
|
if (minValue > parseFloat(values[i])) {
|
minValue = parseFloat(values[i]);
|
}
|
}
|
}
|
} else {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
minValue = parseFloat(values[i][index]);
|
} else {
|
if (minValue > parseFloat(values[i][index])) {
|
minValue = parseFloat(values[i][index]);
|
}
|
}
|
}
|
}
|
return minValue;
|
};
|
|
this.getMaxValue = function (values, index) {
|
var
|
maxValue = null;
|
if (index == null) {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
maxValue = parseFloat(values[i]);
|
} else {
|
if (maxValue < parseFloat(values[i])) {
|
maxValue = parseFloat(values[i]);
|
}
|
}
|
}
|
} else {
|
for (var i = 0; i < values.length; i++) {
|
if (i == 0) {
|
maxValue = parseFloat(values[i][index]);
|
} else {
|
if (maxValue < parseFloat(values[i][index])) {
|
maxValue = parseFloat(values[i][index]);
|
}
|
}
|
}
|
}
|
return maxValue;
|
};
|
|
this.getPixelValue = function (actualValue, actualMinValue, actualMaxValue, pixelMinValue, pixelMaxValue) {
|
return (Math.log(actualValue) - Math.log(actualMinValue)) / (Math.log(actualMaxValue) - Math.log(actualMinValue)) * (pixelMaxValue - pixelMinValue) + pixelMinValue;
|
// return (actualValue - actualMinValue) / (actualMaxValue - actualMinValue) * (pixelMaxValue - pixelMinValue) + pixelMinValue;
|
};
|
|
};
|
|
var fontProportion = function (height) {
|
if (500 > height && height > 300) {
|
return {
|
W: 25,
|
S: 18
|
};
|
}
|
else if (700 > height && height > 500) {
|
return {
|
W: 30,
|
S: 25
|
};
|
} else if (900 > height && height > 700) {
|
return {
|
W: 35,
|
S: 30
|
};
|
} else if (height > 900) {
|
return {
|
W: 40,
|
S: 35
|
};
|
} else {
|
return {
|
W: 25,
|
S: 14
|
};
|
}
|
};
|
|
var extend = function (c, o) {
|
if (o == null) {
|
return c;
|
}
|
|
if (c == null) {
|
c = {};
|
}
|
|
for (var key in o) {
|
c[key] = o[key];
|
}
|
|
return c;
|
};
|
|
var svgDocument = function (p) {
|
var
|
elementType = {
|
"svg": "svg",
|
"path": 'path',
|
"rect": "rect",
|
"g": "g",
|
"circle": "circle",
|
"text": "text"
|
},
|
param = extend({}, p),
|
area = null,
|
node = null,
|
importAddress = "http://www.w3.org/2000/svg";
|
|
this.createArea = function (attr, style) {
|
var
|
areaAttr = extend({}, attr),
|
|
areaStyle = extend({}, style);
|
|
node.appendChild(area = document.createElementNS(importAddress, elementType.rect)
|
.setAttr(areaAttr).setStyle(areaStyle));
|
return area;
|
};
|
|
this.createRect = function (attr, style, name) {
|
var
|
areaAttr = extend({}, attr),
|
|
areaStyle = extend({}, style),
|
|
rect = document.createElementNS(importAddress, elementType.rect).setAttr(areaAttr).setStyle(areaStyle);
|
rect.createKey(name);
|
node.appendChild(rect);
|
}
|
|
this.createText = function (attr, style, txt, zIndex, name) {
|
var g = document.createElementNS(importAddress, elementType.g);
|
var textNode = document.createTextNode(txt);
|
text = document.createElementNS(importAddress, elementType.text);
|
text.createKey(name);
|
//alert(name);
|
text.setAttr(attr).setAttr("style", style || "").appendChild(textNode);
|
g.setAttr("zIndex", (zIndex || 1)).appendChild(text);
|
node.appendChild(g);
|
};
|
|
this.createImage = function (attr, style, path, zIndex, name) {
|
var g = document.createElementNS(importAddress, elementType.g);
|
g.innerHTML('<image xlink:href="path/to/image.jpg" width="50%" height="50%"/>');
|
node.appendChild(g);
|
};
|
|
this.removeByName = function (name) {
|
var elm = this.getPathByName(name);
|
if (typeof elm === "Element") {
|
node.remove(this.getPathByName(name));
|
}
|
};
|
|
this.createCircle = function (name, attr, style) {
|
var circle = document.createElementNS(importAddress, elementType.circle);
|
circle.createKey(name);
|
if (style != null) {
|
circle.setAttr(attr);
|
}
|
else {
|
circle.setAttr(attr).setAttr("style", style);
|
}
|
// circle.setAttr("id", name);
|
node.appendChild(circle);
|
return circle;
|
};
|
|
this.createPath = function (name, value, attr, style) {
|
var path = document.createElementNS(importAddress, elementType.path);
|
path.createKey(name);
|
node.appendChild(path);
|
this.setPathValue(path, value, attr, style)
|
return path;
|
};
|
|
this.getPathByName = function (name) {
|
return document.getElementById(name);
|
};
|
|
this.setPathValue = function (path, value, attr, style) {
|
if (value == null) {
|
return;
|
}
|
path = typeof path === "string" ? this.getPathByName(path) : path;
|
path.setAttr("d", value).setAttr(attr || {}).setStyle(style || {});
|
|
};
|
|
this.getRootNode = function () {
|
return node;
|
};
|
|
this.init = function (p) {
|
param = extend(param, p);
|
var
|
container = param.container,
|
size = {
|
"width": param.width,
|
"height": param.height
|
};
|
if (node == null) {
|
node = document.createElementNS(importAddress, elementType.svg);
|
node.setAttribute("xmlns", "http://www.w3.org/2000/svg")
|
node.setAttribute("shape-rendering", "crispEdges");
|
node.setAttribute("version", "1.0");
|
node.on("mousemove", function (e) {
|
if (typeof param.svgMove == "function") {
|
var e = e || window.event;
|
param.svgMove(e, node);
|
}
|
});
|
node.on("click", function (e) {
|
if (typeof param.svgClick == "function") {
|
var e = e || window.event;
|
param.svgClick(e, node);
|
}
|
});
|
}
|
container.appendChild(node.setAttr(size));
|
return this;
|
};
|
};
|
|
})(window);
|
|
export default window
|
