📄 svg.js
字号:
var strokeStyle = dojo.lang.shallowCopy(dojo.gfx.defaultStroke, true); var color = new dojo.gfx.color.Color(stroke); if (color) { strokeStyle.color = color; strokeStyle.color.a = rawNode.getAttribute("stroke-opacity"); strokeStyle.width = rawNode.getAttribute("stroke-width"); strokeStyle.cap = rawNode.getAttribute("stroke-linecap"); strokeStyle.join = rawNode.getAttribute("stroke-linejoin"); if (strokeStyle.join == "miter") { strokeStyle.join = rawNode.getAttribute("stroke-miterlimit"); } } return strokeStyle;}, attachTransform:function (rawNode) { var matrix = null; if (rawNode) { matrix = rawNode.getAttribute("transform"); if (matrix.match(/^matrix\(.+\)$/)) { var t = matrix.slice(7, -1).split(","); matrix = dojo.gfx.matrix.normalize({xx:parseFloat(t[0]), xy:parseFloat(t[2]), yx:parseFloat(t[1]), yy:parseFloat(t[3]), dx:parseFloat(t[4]), dy:parseFloat(t[5])}); } } return matrix;}, attachShape:function (rawNode) { var shape = null; if (rawNode) { shape = dojo.lang.shallowCopy(this.shape, true); for (var i in shape) { shape[i] = rawNode.getAttribute(i); } } return shape;}, attach:function (rawNode) { if (rawNode) { this.rawNode = rawNode; this.fillStyle = this.attachFill(rawNode); this.strokeStyle = this.attachStroke(rawNode); this.matrix = this.attachTransform(rawNode); this.shape = this.attachShape(rawNode); }}});dojo.declare("dojo.gfx.Group", dojo.gfx.Shape, {setRawNode:function (rawNode) { this.rawNode = rawNode;}});dojo.gfx.Group.nodeType = "g";dojo.declare("dojo.gfx.Rect", dojo.gfx.shape.Rect, {attachShape:function (rawNode) { var shape = null; if (rawNode) { shape = dojo.gfx.Rect.superclass.attachShape.apply(this, arguments); shape.r = Math.min(rawNode.getAttribute("rx"), rawNode.getAttribute("ry")); } return shape;}, setShape:function (newShape) { this.shape = dojo.gfx.makeParameters(this.shape, newShape); this.bbox = null; for (var i in this.shape) { if (i != "type" && i != "r") { this.rawNode.setAttribute(i, this.shape[i]); } } this.rawNode.setAttribute("rx", this.shape.r); this.rawNode.setAttribute("ry", this.shape.r); return this;}});dojo.gfx.Rect.nodeType = "rect";dojo.gfx.Ellipse = dojo.gfx.shape.Ellipse;dojo.gfx.Ellipse.nodeType = "ellipse";dojo.gfx.Circle = dojo.gfx.shape.Circle;dojo.gfx.Circle.nodeType = "circle";dojo.gfx.Line = dojo.gfx.shape.Line;dojo.gfx.Line.nodeType = "line";dojo.declare("dojo.gfx.Polyline", dojo.gfx.shape.Polyline, {setShape:function (points) { if (points && points instanceof Array) { this.shape = dojo.gfx.makeParameters(this.shape, {points:points}); if (closed && this.shape.points.length) { this.shape.points.push(this.shape.points[0]); } } else { this.shape = dojo.gfx.makeParameters(this.shape, points); } this.box = null; var attr = []; var p = this.shape.points; for (var i = 0; i < p.length; ++i) { attr.push(p[i].x.toFixed(8)); attr.push(p[i].y.toFixed(8)); } this.rawNode.setAttribute("points", attr.join(" ")); return this;}});dojo.gfx.Polyline.nodeType = "polyline";dojo.declare("dojo.gfx.Image", dojo.gfx.shape.Image, {setShape:function (newShape) { this.shape = dojo.gfx.makeParameters(this.shape, newShape); this.bbox = null; var rawNode = this.rawNode; for (var i in this.shape) { if (i != "type" && i != "src") { rawNode.setAttribute(i, this.shape[i]); } } rawNode.setAttributeNS(dojo.svg.xmlns.xlink, "href", this.shape.src); return this;}, setStroke:function () { return this;}, setFill:function () { return this;}, attachStroke:function (rawNode) { return null;}, attachFill:function (rawNode) { return null;}});dojo.gfx.Image.nodeType = "image";dojo.declare("dojo.gfx.Path", dojo.gfx.path.Path, {_updateWithSegment:function (segment) { dojo.gfx.Path.superclass._updateWithSegment.apply(this, arguments); if (typeof (this.shape.path) == "string") { this.rawNode.setAttribute("d", this.shape.path); }}, setShape:function (newShape) { dojo.gfx.Path.superclass.setShape.apply(this, arguments); this.rawNode.setAttribute("d", this.shape.path); return this;}});dojo.gfx.Path.nodeType = "path";dojo.gfx._creators = {createPath:function (path) { return this.createObject(dojo.gfx.Path, path);}, createRect:function (rect) { return this.createObject(dojo.gfx.Rect, rect);}, createCircle:function (circle) { return this.createObject(dojo.gfx.Circle, circle);}, createEllipse:function (ellipse) { return this.createObject(dojo.gfx.Ellipse, ellipse);}, createLine:function (line) { return this.createObject(dojo.gfx.Line, line);}, createPolyline:function (points) { return this.createObject(dojo.gfx.Polyline, points);}, createImage:function (image) { return this.createObject(dojo.gfx.Image, image);}, createGroup:function () { return this.createObject(dojo.gfx.Group);}, createObject:function (shapeType, rawShape) { if (!this.rawNode) { return null; } var shape = new shapeType(); var node = document.createElementNS(dojo.svg.xmlns.svg, shapeType.nodeType); shape.setRawNode(node); this.rawNode.appendChild(node); shape.setShape(rawShape); this.add(shape); return shape;}, add:function (shape) { var oldParent = shape.getParent(); if (oldParent) { oldParent.remove(shape, true); } shape._setParent(this, null); this.rawNode.appendChild(shape.rawNode); return this;}, remove:function (shape, silently) { if (this.rawNode == shape.rawNode.parentNode) { this.rawNode.removeChild(shape.rawNode); } shape._setParent(null, null); return this;}};dojo.gfx.attachNode = function (node) { if (!node) { return null; } var s = null; switch (node.tagName.toLowerCase()) { case dojo.gfx.Rect.nodeType: s = new dojo.gfx.Rect(); break; case dojo.gfx.Ellipse.nodeType: s = new dojo.gfx.Ellipse(); break; case dojo.gfx.Polyline.nodeType: s = new dojo.gfx.Polyline(); break; case dojo.gfx.Path.nodeType: s = new dojo.gfx.Path(); break; case dojo.gfx.Circle.nodeType: s = new dojo.gfx.Circle(); break; case dojo.gfx.Line.nodeType: s = new dojo.gfx.Line(); break; case dojo.gfx.Image.nodeType: s = new dojo.gfx.Image(); break; default: dojo.debug("FATAL ERROR! tagName = " + node.tagName); } s.attach(node); return s;};dojo.lang.extend(dojo.gfx.Surface, {setDimensions:function (width, height) { if (!this.rawNode) { return this; } this.rawNode.setAttribute("width", width); this.rawNode.setAttribute("height", height); return this;}, getDimensions:function () { return this.rawNode ? {width:this.rawNode.getAttribute("width"), height:this.rawNode.getAttribute("height")} : null;}});dojo.gfx.createSurface = function (parentNode, width, height) { var s = new dojo.gfx.Surface(); s.rawNode = document.createElementNS(dojo.svg.xmlns.svg, "svg"); s.rawNode.setAttribute("width", width); s.rawNode.setAttribute("height", height); var defs = new dojo.gfx.svg.Defines(); var node = document.createElementNS(dojo.svg.xmlns.svg, dojo.gfx.svg.Defines.nodeType); defs.setRawNode(node); s.rawNode.appendChild(node); dojo.byId(parentNode).appendChild(s.rawNode); return s;};dojo.gfx.attachSurface = function (node) { var s = new dojo.gfx.Surface(); s.rawNode = node; return s;};dojo.lang.extend(dojo.gfx.Group, dojo.gfx._creators);dojo.lang.extend(dojo.gfx.Surface, dojo.gfx._creators);delete dojo.gfx._creators;dojo.gfx.svg.Defines = function () { this.rawNode = null;};dojo.lang.extend(dojo.gfx.svg.Defines, {setRawNode:function (rawNode) { this.rawNode = rawNode;}});dojo.gfx.svg.Defines.nodeType = "defs";
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -