From 7ec9326ce00d08f9d957981f2edff6df26f24a28 Mon Sep 17 00:00:00 2001 From: jinlin <jinlin> Date: 星期四, 26 九月 2024 13:25:02 +0800 Subject: [PATCH] 修改 --- web/public/SVGOrigin/Method-Draw-master/method-draw/lib/canvg/canvg.js | 944 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 472 insertions(+), 472 deletions(-) diff --git a/web/public/SVGOrigin/Method-Draw-master/method-draw/lib/canvg/canvg.js b/web/public/SVGOrigin/Method-Draw-master/method-draw/lib/canvg/canvg.js index 662beb3..2592669 100644 --- a/web/public/SVGOrigin/Method-Draw-master/method-draw/lib/canvg/canvg.js +++ b/web/public/SVGOrigin/Method-Draw-master/method-draw/lib/canvg/canvg.js @@ -1,6 +1,6 @@ /* * canvg.js - Javascript SVG parser and renderer on Canvas - * MIT Licensed + * MIT Licensed * Gabe Lerner (gabelerner@gmail.com) * http://code.google.com/p/canvg/ * @@ -55,13 +55,13 @@ canvg(c, div.innerHTML); } return; - } + } opts = opts || {}; - + if (typeof target == 'string') { target = document.getElementById(target); } - + // reuse class per canvas var svg; if (target.svg == null) { @@ -73,7 +73,7 @@ svg.stop(); } svg.opts = opts; - + var ctx = target.getContext('2d'); if (typeof(s.documentElement) != 'undefined') { // load from xml doc @@ -91,10 +91,10 @@ function build() { var svg = { }; - + svg.FRAMERATE = 30; svg.MAX_VIRTUAL_PIXELS = 30000; - + // globals svg.init = function(ctx) { svg.Definitions = {}; @@ -114,14 +114,14 @@ if (d != null && typeof(d) == 'number') return d; if (d == 'x') return this.width(); if (d == 'y') return this.height(); - return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2); + return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2); } }); } svg.init(); - + // images loaded - svg.ImagesLoaded = function() { + svg.ImagesLoaded = function() { for (var i=0; i<svg.Images.length; i++) { if (!svg.Images[i].loaded) return false; } @@ -130,10 +130,10 @@ // trim svg.trim = function(s) { return s.replace(/^\s+|\s+$/g, ''); } - + // compress spaces svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); } - + // ajax svg.ajax = function(url) { var AJAX; @@ -145,8 +145,8 @@ return AJAX.responseText; } return null; - } - + } + // parse xml svg.parseXml = function(xml) { if (window.DOMParser) @@ -154,48 +154,48 @@ var parser = new DOMParser(); return parser.parseFromString(xml, 'text/xml'); } - else + else { xml = xml.replace(/<!DOCTYPE svg[^>]*>/, ''); var xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); xmlDoc.async = 'false'; - xmlDoc.loadXML(xml); + xmlDoc.loadXML(xml); return xmlDoc; - } + } } - + svg.Property = function(name, value) { this.name = name; this.value = value; - + this.hasValue = function() { return (this.value != null && this.value !== ''); } - + // return the numerical value of the property this.numValue = function() { if (!this.hasValue()) return 0; - + var n = parseFloat(this.value); if ((this.value + '').match(/%$/)) { n = n / 100.0; } return n; } - + this.valueOrDefault = function(def) { if (this.hasValue()) return this.value; return def; } - + this.numValueOrDefault = function(def) { if (this.hasValue()) return this.numValue(); return def; } - + /* EXTENSIONS */ var that = this; - + // color extensions this.Color = { // augment the current color value with the opacity @@ -210,7 +210,7 @@ return new svg.Property(that.name, newValue); } } - + // definition extensions this.Definition = { // get the definition from the definitions table @@ -218,43 +218,43 @@ var name = that.value.replace(/^(url\()?#([^\)]+)\)?$/, '$2'); return svg.Definitions[name]; }, - + isUrl: function() { return that.value.indexOf('url(') == 0 }, - + getFillStyle: function(e) { var def = this.getDefinition(); - + // gradient if (def != null && def.createGradient) { return def.createGradient(svg.ctx, e); } - + // pattern if (def != null && def.createPattern) { return def.createPattern(svg.ctx, e); } - + return null; } } - + // length extensions this.Length = { DPI: function(viewPort) { return 96.0; // TODO: compute? }, - + EM: function(viewPort) { var em = 12; - + var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); if (fontSize.hasValue()) em = fontSize.Length.toPixels(viewPort); - + return em; }, - + // get the length as pixels toPixels: function(viewPort) { if (!that.hasValue()) return 0; @@ -271,7 +271,7 @@ return that.numValue(); } } - + // time extensions this.Time = { // get the time as milliseconds @@ -283,7 +283,7 @@ return that.numValue(); } } - + // angle extensions this.Angle = { // get the angle as radians @@ -297,25 +297,25 @@ } } } - + // fonts svg.Font = new (function() { this.Styles = ['normal','italic','oblique','inherit']; this.Variants = ['normal','small-caps','inherit']; this.Weights = ['normal','bold','bolder','lighter','100','200','300','400','500','600','700','800','900','inherit']; - - this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) { + + this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) { var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font); - return { - fontFamily: fontFamily || f.fontFamily, - fontSize: fontSize || f.fontSize, - fontStyle: fontStyle || f.fontStyle, - fontWeight: fontWeight || f.fontWeight, + return { + fontFamily: fontFamily || f.fontFamily, + fontSize: fontSize || f.fontSize, + fontStyle: fontStyle || f.fontStyle, + fontWeight: fontWeight || f.fontWeight, fontVariant: fontVariant || f.fontVariant, - toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') } - } + toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') } + } } - + var that = this; this.Parse = function(s) { var f = {}; @@ -332,7 +332,7 @@ return f; } }); - + // points and paths svg.ToNumberArray = function(s) { var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' '); @@ -340,15 +340,15 @@ a[i] = parseFloat(a[i]); } return a; - } + } svg.Point = function(x, y) { this.x = x; this.y = y; - + this.angleTo = function(p) { return Math.atan2(p.y - this.y, p.x - this.x); } - + this.applyTransform = function(v) { var xp = this.x * v[0] + this.y * v[2] + v[4]; var yp = this.x * v[1] + this.y * v[3] + v[5]; @@ -368,20 +368,20 @@ } return path; } - + // bounding box svg.BoundingBox = function(x1, y1, x2, y2) { // pass in initial points if you want this.x1 = Number.NaN; this.y1 = Number.NaN; this.x2 = Number.NaN; this.y2 = Number.NaN; - + this.x = function() { return this.x1; } this.y = function() { return this.y1; } this.width = function() { return this.x2 - this.x1; } this.height = function() { return this.y2 - this.y1; } - - this.addPoint = function(x, y) { + + this.addPoint = function(x, y) { if (x != null) { if (isNaN(this.x1) || isNaN(this.x2)) { this.x1 = x; @@ -390,7 +390,7 @@ if (x < this.x1) this.x1 = x; if (x > this.x2) this.x2 = x; } - + if (y != null) { if (isNaN(this.y1) || isNaN(this.y2)) { this.y1 = y; @@ -399,15 +399,15 @@ if (y < this.y1) this.y1 = y; if (y > this.y2) this.y2 = y; } - } + } this.addX = function(x) { this.addPoint(x, null); } this.addY = function(y) { this.addPoint(null, y); } - + this.addBoundingBox = function(bb) { this.addPoint(bb.x1, bb.y1); this.addPoint(bb.x2, bb.y2); } - + this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) { var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0) var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0) @@ -415,25 +415,25 @@ var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0) this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y); } - + this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) { // from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y]; this.addPoint(p0[0], p0[1]); this.addPoint(p3[0], p3[1]); - + for (i=0; i<=1; i++) { - var f = function(t) { + var f = function(t) { return Math.pow(1-t, 3) * p0[i] + 3 * Math.pow(1-t, 2) * t * p1[i] + 3 * (1-t) * Math.pow(t, 2) * p2[i] + Math.pow(t, 3) * p3[i]; } - + var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i]; var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i]; var c = 3 * p1[i] - 3 * p0[i]; - + if (a == 0) { if (b == 0) continue; var t = -c / b; @@ -443,7 +443,7 @@ } continue; } - + var b2ac = Math.pow(b, 2) - 4 * c * a; if (b2ac < 0) continue; var t1 = (-b + Math.sqrt(b2ac)) / (2 * a); @@ -458,23 +458,23 @@ } } } - + this.isPointInBox = function(x, y) { return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2); } - + this.addPoint(x1, y1); this.addPoint(x2, y2); } - + // transforms - svg.Transform = function(v) { + svg.Transform = function(v) { var that = this; this.Type = {} - + // translate this.Type.translate = function(s) { - this.p = svg.CreatePoint(s); + this.p = svg.CreatePoint(s); this.apply = function(ctx) { ctx.translate(this.p.x || 0.0, this.p.y || 0.0); } @@ -482,7 +482,7 @@ p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); } } - + // rotate this.Type.rotate = function(s) { var a = svg.ToNumberArray(s); @@ -499,9 +499,9 @@ p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]); p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]); - } + } } - + this.Type.scale = function(s) { this.p = svg.CreatePoint(s); this.apply = function(ctx) { @@ -509,9 +509,9 @@ } this.applyToPoint = function(p) { p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]); - } + } } - + this.Type.matrix = function(s) { this.m = svg.ToNumberArray(s); this.apply = function(ctx) { @@ -519,44 +519,44 @@ } this.applyToPoint = function(p) { p.applyTransform(this.m); - } + } } - + this.Type.SkewBase = function(s) { this.base = that.Type.matrix; this.base(s); this.angle = new svg.Property('angle', s); } this.Type.SkewBase.prototype = new this.Type.matrix; - + this.Type.skewX = function(s) { this.base = that.Type.SkewBase; this.base(s); this.m = [1, 0, Math.tan(this.angle.Angle.toRadians()), 1, 0, 0]; } this.Type.skewX.prototype = new this.Type.SkewBase; - + this.Type.skewY = function(s) { this.base = that.Type.SkewBase; this.base(s); this.m = [1, Math.tan(this.angle.Angle.toRadians()), 0, 1, 0, 0]; } this.Type.skewY.prototype = new this.Type.SkewBase; - + this.transforms = []; - + this.apply = function(ctx) { for (var i=0; i<this.transforms.length; i++) { this.transforms[i].apply(ctx); } } - + this.applyToPoint = function(p) { for (var i=0; i<this.transforms.length; i++) { this.transforms[i].applyToPoint(p); } } - + var data = svg.trim(svg.compressSpaces(v)).split(/\s(?=[a-z])/); for (var i=0; i<data.length; i++) { var type = data[i].split('(')[0]; @@ -565,73 +565,73 @@ this.transforms.push(transform); } } - + // aspect ratio svg.AspectRatio = function(ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) { // aspect ratio - http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute aspectRatio = svg.compressSpaces(aspectRatio); aspectRatio = aspectRatio.replace(/^defer\s/,''); // ignore defer var align = aspectRatio.split(' ')[0] || 'xMidYMid'; - var meetOrSlice = aspectRatio.split(' ')[1] || 'meet'; - + var meetOrSlice = aspectRatio.split(' ')[1] || 'meet'; + // calculate scale var scaleX = width / desiredWidth; var scaleY = height / desiredHeight; var scaleMin = Math.min(scaleX, scaleY); var scaleMax = Math.max(scaleX, scaleY); if (meetOrSlice == 'meet') { desiredWidth *= scaleMin; desiredHeight *= scaleMin; } - if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; } - + if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; } + refX = new svg.Property('refX', refX); refY = new svg.Property('refY', refY); - if (refX.hasValue() && refY.hasValue()) { + if (refX.hasValue() && refY.hasValue()) { ctx.translate(-scaleMin * refX.Length.toPixels('x'), -scaleMin * refY.Length.toPixels('y')); - } - else { - // align - if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0); - if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0); - if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0); - if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight); } - + else { + // align + if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0); + if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0); + if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0); + if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight); + } + // scale if (align == 'none') ctx.scale(scaleX, scaleY); - else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin); - else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax); - + else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin); + else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax); + // translate - ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY); + ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY); } - + // elements svg.Element = {} - - svg.Element.ElementBase = function(node) { + + svg.Element.ElementBase = function(node) { this.attributes = {}; this.styles = {}; this.children = []; - + // get or create attribute this.attribute = function(name, createIfNotExists) { var a = this.attributes[name]; if (a != null) return a; - + a = new svg.Property(name, ''); if (createIfNotExists == true) this.attributes[name] = a; return a; } - + // get or create style, crawls up node tree this.style = function(name, createIfNotExists) { var s = this.styles[name]; if (s != null) return s; - + var a = this.attribute(name); if (a != null && a.hasValue()) { return a; } - + var p = this.parent; if (p != null) { var ps = p.style(name); @@ -639,20 +639,20 @@ return ps; } } - + s = new svg.Property(name, ''); if (createIfNotExists == true) this.styles[name] = s; return s; } - + // base render this.render = function(ctx) { // don't render display=none if (this.style('display').value == 'none') return; - + // don't render visibility=hidden if (this.attribute('visibility').value == 'hidden') return; - + ctx.save(); this.setContext(ctx); // mask @@ -664,56 +664,56 @@ var filter = this.style('filter').Definition.getDefinition(); if (filter != null) filter.apply(ctx, this); } - else this.renderChildren(ctx); + else this.renderChildren(ctx); this.clearContext(ctx); ctx.restore(); } - + // base set context this.setContext = function(ctx) { // OVERRIDE ME! } - + // base clear context this.clearContext = function(ctx) { // OVERRIDE ME! - } - + } + // base render children this.renderChildren = function(ctx) { for (var i=0; i<this.children.length; i++) { this.children[i].render(ctx); } } - + this.addChild = function(childNode, create) { var child = childNode; if (create) child = svg.CreateElement(childNode); child.parent = this; - this.children.push(child); + this.children.push(child); } - + if (node != null && node.nodeType == 1) { //ELEMENT_NODE // add children for (var i=0; i<node.childNodes.length; i++) { var childNode = node.childNodes[i]; if (childNode.nodeType == 1) this.addChild(childNode, true); //ELEMENT_NODE } - + // add attributes for (var i=0; i<node.attributes.length; i++) { var attribute = node.attributes[i]; this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue); } - + // add tag styles var styles = svg.Styles[node.nodeName]; if (styles != null) { for (var name in styles) { this.styles[name] = styles[name]; } - } - + } + // add class styles if (this.attribute('class').hasValue()) { var classes = svg.compressSpaces(this.attribute('class').value).split(' '); @@ -732,7 +732,7 @@ } } } - + // add inline styles if (this.attribute('style').hasValue()) { var styles = this.attribute('style').value.split(';'); @@ -744,7 +744,7 @@ this.styles[name] = new svg.Property(name, value); } } - } + } // add id if (this.attribute('id').hasValue()) { @@ -754,11 +754,11 @@ } } } - + svg.Element.RenderedElementBase = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.setContext = function(ctx) { // fill if (this.style('fill').Definition.isUrl()) { @@ -770,7 +770,7 @@ if (this.style('fill-opacity').hasValue()) fillStyle = fillStyle.Color.addOpacity(this.style('fill-opacity').value); ctx.fillStyle = (fillStyle.value == 'none' ? 'rgba(0,0,0,0)' : fillStyle.value); } - + // stroke if (this.style('stroke').Definition.isUrl()) { var fs = this.style('stroke').Definition.getFillStyle(this); @@ -788,49 +788,49 @@ // font if (typeof(ctx.font) != 'undefined') { - ctx.font = svg.Font.CreateFont( - this.style('font-style').value, - this.style('font-variant').value, - this.style('font-weight').value, - this.style('font-size').hasValue() ? this.style('font-size').Length.toPixels() + 'px' : '', + ctx.font = svg.Font.CreateFont( + this.style('font-style').value, + this.style('font-variant').value, + this.style('font-weight').value, + this.style('font-size').hasValue() ? this.style('font-size').Length.toPixels() + 'px' : '', this.style('font-family').value).toString(); } - + // transform - if (this.attribute('transform').hasValue()) { + if (this.attribute('transform').hasValue()) { var transform = new svg.Transform(this.attribute('transform').value); transform.apply(ctx); } - + // clip if (this.attribute('clip-path').hasValue()) { var clip = this.attribute('clip-path').Definition.getDefinition(); if (clip != null) clip.apply(ctx); } - + // opacity if (this.style('opacity').hasValue()) { ctx.globalAlpha = this.style('opacity').numValue(); } - } + } } svg.Element.RenderedElementBase.prototype = new svg.Element.ElementBase; - + svg.Element.PathElementBase = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + this.path = function(ctx) { if (ctx != null) ctx.beginPath(); return new svg.BoundingBox(); } - + this.renderChildren = function(ctx) { this.path(ctx); svg.Mouse.checkPath(this, ctx); if (ctx.fillStyle != '') ctx.fill(); if (ctx.strokeStyle != '') ctx.stroke(); - + var markers = this.getMarkers(); if (markers != null) { if (this.style('marker-start').Definition.isUrl()) { @@ -847,58 +847,58 @@ var marker = this.style('marker-end').Definition.getDefinition(); marker.render(ctx, markers[markers.length-1][0], markers[markers.length-1][1]); } - } + } } - + this.getBoundingBox = function() { return this.path(); } - + this.getMarkers = function() { return null; } } svg.Element.PathElementBase.prototype = new svg.Element.RenderedElementBase; - + // svg element svg.Element.svg = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + this.baseClearContext = this.clearContext; this.clearContext = function(ctx) { this.baseClearContext(ctx); svg.ViewPort.RemoveCurrent(); } - + this.baseSetContext = this.setContext; this.setContext = function(ctx) { // initial values ctx.strokeStyle = 'rgba(0,0,0,0)'; ctx.lineCap = 'butt'; ctx.lineJoin = 'miter'; - ctx.miterLimit = 4; - + ctx.miterLimit = 4; + this.baseSetContext(ctx); - + // create new view port if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) { ctx.translate(this.attribute('x').Length.toPixels('x'), this.attribute('y').Length.toPixels('y')); } - + var width = svg.ViewPort.width(); var height = svg.ViewPort.height(); if (typeof(this.root) == 'undefined' && this.attribute('width').hasValue() && this.attribute('height').hasValue()) { width = this.attribute('width').Length.toPixels('x'); height = this.attribute('height').Length.toPixels('y'); - + var x = 0; var y = 0; if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) { x = -this.attribute('refX').Length.toPixels('x'); y = -this.attribute('refY').Length.toPixels('y'); } - + ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(width, y); @@ -907,19 +907,19 @@ ctx.closePath(); ctx.clip(); } - svg.ViewPort.SetCurrent(width, height); - + svg.ViewPort.SetCurrent(width, height); + // viewbox - if (this.attribute('viewBox').hasValue()) { + if (this.attribute('viewBox').hasValue()) { var viewBox = svg.ToNumberArray(this.attribute('viewBox').value); var minX = viewBox[0]; var minY = viewBox[1]; width = viewBox[2]; height = viewBox[3]; - + svg.AspectRatio(ctx, - this.attribute('preserveAspectRatio').value, - svg.ViewPort.width(), + this.attribute('preserveAspectRatio').value, + svg.ViewPort.width(), width, svg.ViewPort.height(), height, @@ -927,10 +927,10 @@ minY, this.attribute('refX').value, this.attribute('refY').value); - - svg.ViewPort.RemoveCurrent(); - svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]); - } + + svg.ViewPort.RemoveCurrent(); + svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]); + } } } svg.Element.svg.prototype = new svg.Element.RenderedElementBase; @@ -939,7 +939,7 @@ svg.Element.rect = function(node) { this.base = svg.Element.PathElementBase; this.base(node); - + this.path = function(ctx) { var x = this.attribute('x').Length.toPixels('x'); var y = this.attribute('y').Length.toPixels('y'); @@ -949,7 +949,7 @@ var ry = this.attribute('ry').Length.toPixels('y'); if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx; if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry; - + if (ctx != null) { ctx.beginPath(); ctx.moveTo(x + rx, y); @@ -963,45 +963,45 @@ ctx.quadraticCurveTo(x, y, x + rx, y) ctx.closePath(); } - + return new svg.BoundingBox(x, y, x + width, y + height); } } svg.Element.rect.prototype = new svg.Element.PathElementBase; - + // circle element svg.Element.circle = function(node) { this.base = svg.Element.PathElementBase; this.base(node); - + this.path = function(ctx) { var cx = this.attribute('cx').Length.toPixels('x'); var cy = this.attribute('cy').Length.toPixels('y'); var r = this.attribute('r').Length.toPixels(); - + if (ctx != null) { ctx.beginPath(); - ctx.arc(cx, cy, r, 0, Math.PI * 2, true); + ctx.arc(cx, cy, r, 0, Math.PI * 2, true); ctx.closePath(); } - + return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r); } } - svg.Element.circle.prototype = new svg.Element.PathElementBase; + svg.Element.circle.prototype = new svg.Element.PathElementBase; // ellipse element svg.Element.ellipse = function(node) { this.base = svg.Element.PathElementBase; this.base(node); - + this.path = function(ctx) { var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3); var rx = this.attribute('rx').Length.toPixels('x'); var ry = this.attribute('ry').Length.toPixels('y'); var cx = this.attribute('cx').Length.toPixels('x'); var cy = this.attribute('cy').Length.toPixels('y'); - + if (ctx != null) { ctx.beginPath(); ctx.moveTo(cx, cy - ry); @@ -1011,48 +1011,48 @@ ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry); ctx.closePath(); } - + return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry); } } - svg.Element.ellipse.prototype = new svg.Element.PathElementBase; - + svg.Element.ellipse.prototype = new svg.Element.PathElementBase; + // line element svg.Element.line = function(node) { this.base = svg.Element.PathElementBase; this.base(node); - + this.getPoints = function() { return [ new svg.Point(this.attribute('x1').Length.toPixels('x'), this.attribute('y1').Length.toPixels('y')), new svg.Point(this.attribute('x2').Length.toPixels('x'), this.attribute('y2').Length.toPixels('y'))]; } - + this.path = function(ctx) { var points = this.getPoints(); - + if (ctx != null) { ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); ctx.lineTo(points[1].x, points[1].y); } - + return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y); } - + this.getMarkers = function() { - var points = this.getPoints(); + var points = this.getPoints(); var a = points[0].angleTo(points[1]); return [[points[0], a], [points[1], a]]; } } - svg.Element.line.prototype = new svg.Element.PathElementBase; - + svg.Element.line.prototype = new svg.Element.PathElementBase; + // polyline element svg.Element.polyline = function(node) { this.base = svg.Element.PathElementBase; this.base(node); - + this.points = svg.CreatePath(this.attribute('points').value); this.path = function(ctx) { var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y); @@ -1066,7 +1066,7 @@ } return bb; } - + this.getMarkers = function() { var markers = []; for (var i=0; i<this.points.length - 1; i++) { @@ -1074,15 +1074,15 @@ } markers.push([this.points[this.points.length-1], markers[markers.length-1][1]]); return markers; - } + } } - svg.Element.polyline.prototype = new svg.Element.PathElementBase; - + svg.Element.polyline.prototype = new svg.Element.PathElementBase; + // polygon element svg.Element.polygon = function(node) { this.base = svg.Element.polyline; this.base(node); - + this.basePath = this.path; this.path = function(ctx) { var bb = this.basePath(ctx); @@ -1099,7 +1099,7 @@ svg.Element.path = function(node) { this.base = svg.Element.PathElementBase; this.base(node); - + var d = this.attribute('d').value; // TODO: convert to real lexer based on http://www.w3.org/TR/SVG11/paths.html#PathDataBNF d = d.replace(/,/gm,' '); // get rid of all commas @@ -1114,7 +1114,7 @@ d = svg.trim(d); this.PathParser = new (function(d) { this.tokens = d.split(' '); - + this.reset = function() { this.i = -1; this.command = ''; @@ -1125,61 +1125,61 @@ this.points = []; this.angles = []; } - + this.isEnd = function() { return this.i >= this.tokens.length - 1; } - + this.isCommandOrEnd = function() { if (this.isEnd()) return true; return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null; } - + this.isRelativeCommand = function() { return this.command == this.command.toLowerCase(); } - + this.getToken = function() { this.i = this.i + 1; return this.tokens[this.i]; } - + this.getScalar = function() { return parseFloat(this.getToken()); } - + this.nextCommand = function() { this.previousCommand = this.command; this.command = this.getToken(); - } - + } + this.getPoint = function() { var p = new svg.Point(this.getScalar(), this.getScalar()); return this.makeAbsolute(p); } - + this.getAsControlPoint = function() { var p = this.getPoint(); this.control = p; return p; } - + this.getAsCurrentPoint = function() { var p = this.getPoint(); this.current = p; - return p; + return p; } - + this.getReflectedControlPoint = function() { if (this.previousCommand.toLowerCase() != 'c' && this.previousCommand.toLowerCase() != 's') { return this.current; } - + // reflect point - var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y); + var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y); return p; } - + this.makeAbsolute = function(p) { if (this.isRelativeCommand()) { p.x = this.current.x + p.x; @@ -1187,7 +1187,7 @@ } return p; } - + this.addMarker = function(p, from, priorTo) { // if the last angle isn't filled in because we didn't have this point yet ... if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length-1] == null) { @@ -1195,12 +1195,12 @@ } this.addMarkerAngle(p, from == null ? null : from.angleTo(p)); } - + this.addMarkerAngle = function(p, a) { this.points.push(p); this.angles.push(a); - } - + } + this.getMarkerPoints = function() { return this.points; } this.getMarkerAngles = function() { for (var i=0; i<this.angles.length; i++) { @@ -1398,7 +1398,7 @@ this.getMarkers = function() { var points = this.PathParser.getMarkerPoints(); var angles = this.PathParser.getMarkerAngles(); - + var markers = []; for (var i=0; i<points.length; i++) { markers.push([points[i], angles[i]]); @@ -1407,12 +1407,12 @@ } } svg.Element.path.prototype = new svg.Element.PathElementBase; - + // pattern element svg.Element.pattern = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.createPattern = function(ctx, element) { // render me using a temporary svg element var tempSvg = new svg.Element.svg(); @@ -1422,28 +1422,28 @@ tempSvg.attributes['width'] = new svg.Property('width', this.attribute('width').value); tempSvg.attributes['height'] = new svg.Property('height', this.attribute('height').value); tempSvg.children = this.children; - + var c = document.createElement('canvas'); c.width = this.attribute('width').Length.toPixels('x'); c.height = this.attribute('height').Length.toPixels('y'); - tempSvg.render(c.getContext('2d')); + tempSvg.render(c.getContext('2d')); return ctx.createPattern(c, 'repeat'); } } svg.Element.pattern.prototype = new svg.Element.ElementBase; - + // marker element svg.Element.marker = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.baseRender = this.render; this.render = function(ctx, point, angle) { ctx.translate(point.x, point.y); if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(angle); if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth); ctx.save(); - + // render me using a temporary svg element var tempSvg = new svg.Element.svg(); tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value); @@ -1455,7 +1455,7 @@ tempSvg.attributes['stroke'] = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none')); tempSvg.children = this.children; tempSvg.render(ctx); - + ctx.restore(); if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(1/ctx.lineWidth, 1/ctx.lineWidth); if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(-angle); @@ -1463,99 +1463,99 @@ } } svg.Element.marker.prototype = new svg.Element.ElementBase; - + // definitions element svg.Element.defs = function(node) { this.base = svg.Element.ElementBase; - this.base(node); - + this.base(node); + this.render = function(ctx) { // NOOP } } svg.Element.defs.prototype = new svg.Element.ElementBase; - + // base for gradients svg.Element.GradientBase = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox'); - - this.stops = []; + + this.stops = []; for (var i=0; i<this.children.length; i++) { var child = this.children[i]; this.stops.push(child); - } - + } + this.getGradient = function() { // OVERRIDE ME! - } + } this.createGradient = function(ctx, element) { var stopsContainer = this; if (this.attribute('xlink:href').hasValue()) { stopsContainer = this.attribute('xlink:href').Definition.getDefinition(); } - + var g = this.getGradient(ctx, element); for (var i=0; i<stopsContainer.stops.length; i++) { g.addColorStop(stopsContainer.stops[i].offset, stopsContainer.stops[i].color); } - + if (this.attribute('gradientTransform').hasValue()) { // render as transformed pattern on temporary canvas var rootView = svg.ViewPort.viewPorts[0]; - + var rect = new svg.Element.rect(); rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS/3.0); rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS/3.0); rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS); rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS); - + var group = new svg.Element.g(); group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value); group.children = [ rect ]; - + var tempSvg = new svg.Element.svg(); tempSvg.attributes['x'] = new svg.Property('x', 0); tempSvg.attributes['y'] = new svg.Property('y', 0); tempSvg.attributes['width'] = new svg.Property('width', rootView.width); tempSvg.attributes['height'] = new svg.Property('height', rootView.height); tempSvg.children = [ group ]; - + var c = document.createElement('canvas'); c.width = rootView.width; c.height = rootView.height; var tempCtx = c.getContext('2d'); tempCtx.fillStyle = g; - tempSvg.render(tempCtx); + tempSvg.render(tempCtx); return tempCtx.createPattern(c, 'no-repeat'); } - - return g; + + return g; } } svg.Element.GradientBase.prototype = new svg.Element.ElementBase; - + // linear gradient element svg.Element.linearGradient = function(node) { this.base = svg.Element.GradientBase; this.base(node); - + this.getGradient = function(ctx, element) { var bb = element.getBoundingBox(); - - var x1 = (this.gradientUnits == 'objectBoundingBox' - ? bb.x() + bb.width() * this.attribute('x1').numValue() + + var x1 = (this.gradientUnits == 'objectBoundingBox' + ? bb.x() + bb.width() * this.attribute('x1').numValue() : this.attribute('x1').Length.toPixels('x')); - var y1 = (this.gradientUnits == 'objectBoundingBox' + var y1 = (this.gradientUnits == 'objectBoundingBox' ? bb.y() + bb.height() * this.attribute('y1').numValue() : this.attribute('y1').Length.toPixels('y')); - var x2 = (this.gradientUnits == 'objectBoundingBox' + var x2 = (this.gradientUnits == 'objectBoundingBox' ? bb.x() + bb.width() * this.attribute('x2').numValue() : this.attribute('x2').Length.toPixels('x')); - var y2 = (this.gradientUnits == 'objectBoundingBox' + var y2 = (this.gradientUnits == 'objectBoundingBox' ? bb.y() + bb.height() * this.attribute('y2').numValue() : this.attribute('y2').Length.toPixels('y')); @@ -1563,92 +1563,92 @@ } } svg.Element.linearGradient.prototype = new svg.Element.GradientBase; - + // radial gradient element svg.Element.radialGradient = function(node) { this.base = svg.Element.GradientBase; this.base(node); - + this.getGradient = function(ctx, element) { var bb = element.getBoundingBox(); - - var cx = (this.gradientUnits == 'objectBoundingBox' - ? bb.x() + bb.width() * this.attribute('cx').numValue() + + var cx = (this.gradientUnits == 'objectBoundingBox' + ? bb.x() + bb.width() * this.attribute('cx').numValue() : this.attribute('cx').Length.toPixels('x')); - var cy = (this.gradientUnits == 'objectBoundingBox' - ? bb.y() + bb.height() * this.attribute('cy').numValue() + var cy = (this.gradientUnits == 'objectBoundingBox' + ? bb.y() + bb.height() * this.attribute('cy').numValue() : this.attribute('cy').Length.toPixels('y')); - + var fx = cx; var fy = cy; if (this.attribute('fx').hasValue()) { - fx = (this.gradientUnits == 'objectBoundingBox' - ? bb.x() + bb.width() * this.attribute('fx').numValue() + fx = (this.gradientUnits == 'objectBoundingBox' + ? bb.x() + bb.width() * this.attribute('fx').numValue() : this.attribute('fx').Length.toPixels('x')); } if (this.attribute('fy').hasValue()) { - fy = (this.gradientUnits == 'objectBoundingBox' - ? bb.y() + bb.height() * this.attribute('fy').numValue() + fy = (this.gradientUnits == 'objectBoundingBox' + ? bb.y() + bb.height() * this.attribute('fy').numValue() : this.attribute('fy').Length.toPixels('y')); } - - var r = (this.gradientUnits == 'objectBoundingBox' + + var r = (this.gradientUnits == 'objectBoundingBox' ? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue() : this.attribute('r').Length.toPixels()); - + return ctx.createRadialGradient(fx, fy, 0, cx, cy, r); } } svg.Element.radialGradient.prototype = new svg.Element.GradientBase; - + // gradient stop element svg.Element.stop = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.offset = this.attribute('offset').numValue(); - + var stopColor = this.style('stop-color'); if (this.style('stop-opacity').hasValue()) stopColor = stopColor.Color.addOpacity(this.style('stop-opacity').value); this.color = stopColor.value; } svg.Element.stop.prototype = new svg.Element.ElementBase; - + // animation base element svg.Element.AnimateBase = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + svg.Animations.push(this); - + this.duration = 0.0; this.begin = this.attribute('begin').Time.toMilliseconds(); this.maxDuration = this.begin + this.attribute('dur').Time.toMilliseconds(); - + this.getProperty = function() { var attributeType = this.attribute('attributeType').value; var attributeName = this.attribute('attributeName').value; - + if (attributeType == 'CSS') { return this.parent.style(attributeName, true); } - return this.parent.attribute(attributeName, true); + return this.parent.attribute(attributeName, true); }; - + this.initialValue = null; - this.removed = false; + this.removed = false; this.calcValue = function() { // OVERRIDE ME! return ''; } - - this.update = function(delta) { + + this.update = function(delta) { // set initial value if (this.initialValue == null) { this.initialValue = this.getProperty().value; } - + // if we're past the end time if (this.duration > this.maxDuration) { // loop for indefinitely repeating animations @@ -1663,49 +1663,49 @@ else { return false; // no updates made } - } + } this.duration = this.duration + delta; - + // if we're past the begin time var updated = false; if (this.begin < this.duration) { var newValue = this.calcValue(); // tween - + if (this.attribute('type').hasValue()) { // for transform, etc. var type = this.attribute('type').value; newValue = type + '(' + newValue + ')'; } - + this.getProperty().value = newValue; updated = true; } - + return updated; } - + // fraction of duration we've covered this.progress = function() { return ((this.duration - this.begin) / (this.maxDuration - this.begin)); - } + } } svg.Element.AnimateBase.prototype = new svg.Element.ElementBase; - + // animate element svg.Element.animate = function(node) { this.base = svg.Element.AnimateBase; this.base(node); - + this.calcValue = function() { var from = this.attribute('from').numValue(); var to = this.attribute('to').numValue(); - + // tween value linearly - return from + (to - from) * this.progress(); + return from + (to - from) * this.progress(); }; } svg.Element.animate.prototype = new svg.Element.AnimateBase; - + // animate color element svg.Element.animateColor = function(node) { this.base = svg.Element.AnimateBase; @@ -1714,7 +1714,7 @@ this.calcValue = function() { var from = new RGBColor(this.attribute('from').value); var to = new RGBColor(this.attribute('to').value); - + if (from.ok && to.ok) { // tween color linearly var r = from.r + (to.r - from.r) * this.progress(); @@ -1726,26 +1726,26 @@ }; } svg.Element.animateColor.prototype = new svg.Element.AnimateBase; - + // animate transform element svg.Element.animateTransform = function(node) { this.base = svg.Element.animate; this.base(node); } svg.Element.animateTransform.prototype = new svg.Element.animate; - + // font element svg.Element.font = function(node) { this.base = svg.Element.ElementBase; this.base(node); - this.horizAdvX = this.attribute('horiz-adv-x').numValue(); - + this.horizAdvX = this.attribute('horiz-adv-x').numValue(); + this.isRTL = false; this.isArabic = false; this.fontFace = null; this.missingGlyph = null; - this.glyphs = []; + this.glyphs = []; for (var i=0; i<this.children.length; i++) { var child = this.children[i]; if (child.type == 'font-face') { @@ -1766,46 +1766,46 @@ this.glyphs[child.unicode] = child; } } - } + } } svg.Element.font.prototype = new svg.Element.ElementBase; - + // font-face element svg.Element.fontface = function(node) { this.base = svg.Element.ElementBase; - this.base(node); - + this.base(node); + this.ascent = this.attribute('ascent').value; this.descent = this.attribute('descent').value; - this.unitsPerEm = this.attribute('units-per-em').numValue(); + this.unitsPerEm = this.attribute('units-per-em').numValue(); } svg.Element.fontface.prototype = new svg.Element.ElementBase; - + // missing-glyph element svg.Element.missingglyph = function(node) { this.base = svg.Element.path; - this.base(node); - + this.base(node); + this.horizAdvX = 0; } svg.Element.missingglyph.prototype = new svg.Element.path; - + // glyph element svg.Element.glyph = function(node) { this.base = svg.Element.path; - this.base(node); - + this.base(node); + this.horizAdvX = this.attribute('horiz-adv-x').numValue(); this.unicode = this.attribute('unicode').value; this.arabicForm = this.attribute('arabic-form').value; } svg.Element.glyph.prototype = new svg.Element.path; - + // text element svg.Element.text = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + if (node != null) { // add children this.children = []; @@ -1819,21 +1819,21 @@ } } } - + this.baseSetContext = this.setContext; this.setContext = function(ctx) { this.baseSetContext(ctx); if (this.style('dominant-baseline').hasValue()) ctx.textBaseline = this.style('dominant-baseline').value; if (this.style('alignment-baseline').hasValue()) ctx.textBaseline = this.style('alignment-baseline').value; } - + this.renderChildren = function(ctx) { var textAnchor = this.style('text-anchor').valueOrDefault('start'); var x = this.attribute('x').Length.toPixels('x'); var y = this.attribute('y').Length.toPixels('y'); for (var i=0; i<this.children.length; i++) { var child = this.children[i]; - + if (child.attribute('x').hasValue()) { child.x = child.attribute('x').Length.toPixels('x'); } @@ -1841,7 +1841,7 @@ if (child.attribute('dx').hasValue()) x += child.attribute('dx').Length.toPixels('x'); child.x = x; } - + var childLength = child.measureText(ctx); if (textAnchor != 'start' && (i==0 || child.attribute('x').hasValue())) { // new group? // loop through rest of children @@ -1854,33 +1854,33 @@ child.x -= (textAnchor == 'end' ? groupLength : groupLength / 2.0); } x = child.x + childLength; - + if (child.attribute('y').hasValue()) { child.y = child.attribute('y').Length.toPixels('y'); } else { if (child.attribute('dy').hasValue()) y += child.attribute('dy').Length.toPixels('y'); child.y = y; - } + } y = child.y; - + child.render(ctx); } } } svg.Element.text.prototype = new svg.Element.RenderedElementBase; - + // text base svg.Element.TextElementBase = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + this.getGlyph = function(font, text, i) { var c = text[i]; var glyph = null; if (font.isArabic) { var arabicForm = 'isolated'; - if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal'; + if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal'; if (i>0 && text[i-1]!=' ' && i<text.length-2 && text[i+1]!=' ') arabicForm = 'medial'; if (i>0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial'; if (typeof(font.glyphs[c]) != 'undefined') { @@ -1894,7 +1894,7 @@ if (glyph == null) glyph = font.missingGlyph; return glyph; } - + this.renderChildren = function(ctx) { var customFont = this.parent.style('font-family').Definition.getDefinition(); if (customFont != null) { @@ -1902,7 +1902,7 @@ var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle); var text = this.getText(); if (customFont.isRTL) text = text.split("").reverse().join(""); - + var dx = svg.ToNumberArray(this.parent.attribute('dx').value); for (var i=0; i<text.length; i++) { var glyph = this.getGlyph(customFont, text, i); @@ -1916,8 +1916,8 @@ if (fontStyle == 'italic') ctx.transform(1, 0, -.4, 1, 0, 0); ctx.lineWidth = lw; ctx.scale(1/scale, -1/scale); - ctx.translate(-this.x, -this.y); - + ctx.translate(-this.x, -this.y); + this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm; if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) { this.x += dx[i]; @@ -1925,15 +1925,15 @@ } return; } - + if (ctx.strokeStyle != '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y); if (ctx.fillStyle != '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y); } - + this.getText = function() { // OVERRIDE ME } - + this.measureText = function(ctx) { var customFont = this.parent.style('font-family').Definition.getDefinition(); if (customFont != null) { @@ -1951,10 +1951,10 @@ } return measure; } - + var textToMeasure = svg.compressSpaces(this.getText()); if (!ctx.measureText) return textToMeasure.length * 10; - + ctx.save(); this.setContext(ctx); var width = ctx.measureText(textToMeasure).width; @@ -1963,12 +1963,12 @@ } } svg.Element.TextElementBase.prototype = new svg.Element.RenderedElementBase; - - // tspan + + // tspan svg.Element.tspan = function(node) { this.base = svg.Element.TextElementBase; this.base(node); - + this.text = node.nodeType == 3 ? node.nodeValue : // text node.childNodes.length > 0 ? node.childNodes[0].nodeValue : // element node.text; @@ -1977,34 +1977,34 @@ } } svg.Element.tspan.prototype = new svg.Element.TextElementBase; - + // tref svg.Element.tref = function(node) { this.base = svg.Element.TextElementBase; this.base(node); - + this.getText = function() { var element = this.attribute('xlink:href').Definition.getDefinition(); if (element != null) return element.children[0].getText(); } } - svg.Element.tref.prototype = new svg.Element.TextElementBase; - + svg.Element.tref.prototype = new svg.Element.TextElementBase; + // a element svg.Element.a = function(node) { this.base = svg.Element.TextElementBase; this.base(node); - + this.hasText = true; for (var i=0; i<node.childNodes.length; i++) { if (node.childNodes[i].nodeType != 3) this.hasText = false; } - + // this might contain text this.text = this.hasText ? node.childNodes[0].nodeValue : ''; this.getText = function() { return this.text; - } + } this.baseRenderChildren = this.renderChildren; this.renderChildren = function(ctx) { @@ -2012,7 +2012,7 @@ // render as text element this.baseRenderChildren(ctx); var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); - svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.Length.toPixels('y'), this.x + this.measureText(ctx), this.y)); + svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.Length.toPixels('y'), this.x + this.measureText(ctx), this.y)); } else { // render as temporary group @@ -2022,37 +2022,37 @@ g.render(ctx); } } - + this.onclick = function() { window.open(this.attribute('xlink:href').value); } - + this.onmousemove = function() { svg.ctx.canvas.style.cursor = 'pointer'; } } - svg.Element.a.prototype = new svg.Element.TextElementBase; - + svg.Element.a.prototype = new svg.Element.TextElementBase; + // image element svg.Element.image = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + svg.Images.push(this); this.img = document.createElement('img'); this.loaded = false; var that = this; this.img.onload = function() { that.loaded = true; } this.img.src = this.attribute('xlink:href').value; - + this.renderChildren = function(ctx) { var x = this.attribute('x').Length.toPixels('x'); var y = this.attribute('y').Length.toPixels('y'); - + var width = this.attribute('width').Length.toPixels('x'); - var height = this.attribute('height').Length.toPixels('y'); + var height = this.attribute('height').Length.toPixels('y'); if (width == 0 || height == 0) return; - + ctx.save(); ctx.translate(x, y); svg.AspectRatio(ctx, @@ -2062,18 +2062,18 @@ height, this.img.height, 0, - 0); - ctx.drawImage(this.img, 0, 0); + 0); + ctx.drawImage(this.img, 0, 0); ctx.restore(); } } svg.Element.image.prototype = new svg.Element.RenderedElementBase; - + // group element svg.Element.g = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + this.getBoundingBox = function() { var bb = new svg.BoundingBox(); for (var i=0; i<this.children.length; i++) { @@ -2088,21 +2088,21 @@ svg.Element.symbol = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + this.baseSetContext = this.setContext; - this.setContext = function(ctx) { + this.setContext = function(ctx) { this.baseSetContext(ctx); - + // viewbox - if (this.attribute('viewBox').hasValue()) { + if (this.attribute('viewBox').hasValue()) { var viewBox = svg.ToNumberArray(this.attribute('viewBox').value); var minX = viewBox[0]; var minY = viewBox[1]; width = viewBox[2]; height = viewBox[3]; - + svg.AspectRatio(ctx, - this.attribute('preserveAspectRatio').value, + this.attribute('preserveAspectRatio').value, this.attribute('width').Length.toPixels('x'), width, this.attribute('height').Length.toPixels('y'), @@ -2110,17 +2110,17 @@ minX, minY); - svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]); + svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]); } - } + } } - svg.Element.symbol.prototype = new svg.Element.RenderedElementBase; - + svg.Element.symbol.prototype = new svg.Element.RenderedElementBase; + // style element - svg.Element.style = function(node) { + svg.Element.style = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + // text, or spaces then CDATA var css = node.childNodes[0].nodeValue + (node.childNodes.length > 1 ? node.childNodes[1].nodeValue : ''); css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments @@ -2167,60 +2167,60 @@ } } svg.Element.style.prototype = new svg.Element.ElementBase; - - // use element + + // use element svg.Element.use = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + this.baseSetContext = this.setContext; this.setContext = function(ctx) { this.baseSetContext(ctx); if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').Length.toPixels('x'), 0); if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').Length.toPixels('y')); } - + this.getDefinition = function() { var element = this.attribute('xlink:href').Definition.getDefinition(); if (this.attribute('width').hasValue()) element.attribute('width', true).value = this.attribute('width').value; if (this.attribute('height').hasValue()) element.attribute('height', true).value = this.attribute('height').value; return element; } - + this.path = function(ctx) { var element = this.getDefinition(); if (element != null) element.path(ctx); } - + this.renderChildren = function(ctx) { var element = this.getDefinition(); if (element != null) element.render(ctx); } } svg.Element.use.prototype = new svg.Element.RenderedElementBase; - + // mask element svg.Element.mask = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.apply = function(ctx, element) { - // render as temp svg + // render as temp svg var x = this.attribute('x').Length.toPixels('x'); var y = this.attribute('y').Length.toPixels('y'); var width = this.attribute('width').Length.toPixels('x'); var height = this.attribute('height').Length.toPixels('y'); - + // temporarily remove mask to avoid recursion var mask = element.attribute('mask').value; element.attribute('mask').value = ''; - + var cMask = document.createElement('canvas'); cMask.width = x + width; cMask.height = y + height; var maskCtx = cMask.getContext('2d'); this.renderChildren(maskCtx); - + var c = document.createElement('canvas'); c.width = x + width; c.height = y + height; @@ -2229,25 +2229,25 @@ tempCtx.globalCompositeOperation = 'destination-in'; tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat'); tempCtx.fillRect(0, 0, x + width, y + height); - + ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat'); ctx.fillRect(0, 0, x + width, y + height); - + // reassign mask - element.attribute('mask').value = mask; + element.attribute('mask').value = mask; } - + this.render = function(ctx) { // NO RENDER } } svg.Element.mask.prototype = new svg.Element.ElementBase; - + // clip element svg.Element.clipPath = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.apply = function(ctx) { for (var i=0; i<this.children.length; i++) { if (this.children[i].path) { @@ -2256,7 +2256,7 @@ } } } - + this.render = function(ctx) { // NO RENDER } @@ -2267,9 +2267,9 @@ svg.Element.filter = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + this.apply = function(ctx, element) { - // render as temp svg + // render as temp svg var bb = element.getBoundingBox(); var x = this.attribute('x').Length.toPixels('x'); var y = this.attribute('y').Length.toPixels('y'); @@ -2283,55 +2283,55 @@ width = bb.width(); height = bb.height(); } - + // temporarily remove filter to avoid recursion var filter = element.style('filter').value; element.style('filter').value = ''; - + // max filter distance var extraPercent = .20; var px = extraPercent * width; var py = extraPercent * height; - + var c = document.createElement('canvas'); c.width = width + 2*px; c.height = height + 2*py; var tempCtx = c.getContext('2d'); tempCtx.translate(-x + px, -y + py); element.render(tempCtx); - + // apply filters for (var i=0; i<this.children.length; i++) { this.children[i].apply(tempCtx, 0, 0, width + 2*px, height + 2*py); } - + // render on me ctx.drawImage(c, 0, 0, width + 2*px, height + 2*py, x - px, y - py, width + 2*px, height + 2*py); - + // reassign filter - element.style('filter', true).value = filter; + element.style('filter', true).value = filter; } - + this.render = function(ctx) { // NO RENDER - } + } } svg.Element.filter.prototype = new svg.Element.ElementBase; - + svg.Element.feGaussianBlur = function(node) { this.base = svg.Element.ElementBase; - this.base(node); - + this.base(node); + function make_fgauss(sigma) { - sigma = Math.max(sigma, 0.01); - var len = Math.ceil(sigma * 4.0) + 1; - mask = []; - for (var i = 0; i < len; i++) { - mask[i] = Math.exp(-0.5 * (i / sigma) * (i / sigma)); - } - return mask; + sigma = Math.max(sigma, 0.01); + var len = Math.ceil(sigma * 4.0) + 1; + mask = []; + for (var i = 0; i < len; i++) { + mask[i] = Math.exp(-0.5 * (i / sigma) * (i / sigma)); + } + return mask; } - + function normalize(mask) { var sum = 0; for (var i = 1; i < mask.length; i++) { @@ -2343,34 +2343,34 @@ } return mask; } - + function convolve_even(src, dst, mask, width, height) { for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { var a = imGet(src, x, y, width, height, 3)/255; - for (var rgba = 0; rgba < 4; rgba++) { + for (var rgba = 0; rgba < 4; rgba++) { var sum = mask[0] * (a==0?255:imGet(src, x, y, width, height, rgba)) * (a==0||rgba==3?1:a); for (var i = 1; i < mask.length; i++) { var a1 = imGet(src, Math.max(x-i,0), y, width, height, 3)/255; var a2 = imGet(src, Math.min(x+i, width-1), y, width, height, 3)/255; - sum += mask[i] * - ((a1==0?255:imGet(src, Math.max(x-i,0), y, width, height, rgba)) * (a1==0||rgba==3?1:a1) + + sum += mask[i] * + ((a1==0?255:imGet(src, Math.max(x-i,0), y, width, height, rgba)) * (a1==0||rgba==3?1:a1) + (a2==0?255:imGet(src, Math.min(x+i, width-1), y, width, height, rgba)) * (a2==0||rgba==3?1:a2)); } imSet(dst, y, x, height, width, rgba, sum); - } + } } } - } + } function imGet(img, x, y, width, height, rgba) { return img[y*width*4 + x*4 + rgba]; } - + function imSet(img, x, y, width, height, rgba, val) { img[y*width*4 + x*4 + rgba] = val; } - + function blur(ctx, width, height, sigma) { var srcData = ctx.getImageData(0, 0, width, height); @@ -2381,15 +2381,15 @@ convolve_even(tmp, srcData.data, mask, height, width); ctx.clearRect(0, 0, width, height); ctx.putImageData(srcData, 0, 0); - } - + } + this.apply = function(ctx, x, y, width, height) { // assuming x==0 && y==0 for now blur(ctx, width, height, this.attribute('stdDeviation').numValue()); } } svg.Element.filter.prototype = new svg.Element.feGaussianBlur; - + // title element, do nothing svg.Element.title = function(node) { } @@ -2398,15 +2398,15 @@ // desc element, do nothing svg.Element.desc = function(node) { } - svg.Element.desc.prototype = new svg.Element.ElementBase; - + svg.Element.desc.prototype = new svg.Element.ElementBase; + svg.Element.MISSING = function(node) { console.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.'); } svg.Element.MISSING.prototype = new svg.Element.ElementBase; - + // element factory - svg.CreateElement = function(node) { + svg.CreateElement = function(node) { var className = node.nodeName.replace(/^[^:]+:/,''); // remove namespace className = className.replace(/\-/g,''); // remove dashes var e = null; @@ -2420,20 +2420,20 @@ e.type = node.nodeName; return e; } - + // load from url svg.load = function(ctx, url) { svg.loadXml(ctx, svg.ajax(url)); } - + // load from xml svg.loadXml = function(ctx, xml) { svg.loadXmlDoc(ctx, svg.parseXml(xml)); } - + svg.loadXmlDoc = function(ctx, dom) { svg.init(ctx); - + var mapXY = function(p) { var e = ctx.canvas; while (e) { @@ -2445,7 +2445,7 @@ if (window.scrollY) p.y += window.scrollY; return p; } - + // bind mouse if (svg.opts['ignoreMouse'] != true) { ctx.canvas.onclick = function(e) { @@ -2457,16 +2457,16 @@ svg.Mouse.onmousemove(p.x, p.y); }; } - + var e = svg.CreateElement(dom.documentElement); e.root = true; - + // render loop var isFirstRender = true; var draw = function() { svg.ViewPort.Clear(); if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight); - + if (svg.opts['ignoreDimensions'] != true) { // set canvas size if (e.style('width').hasValue()) { @@ -2480,21 +2480,21 @@ } var cWidth = ctx.canvas.clientWidth || ctx.canvas.width; var cHeight = ctx.canvas.clientHeight || ctx.canvas.height; - svg.ViewPort.SetCurrent(cWidth, cHeight); - + svg.ViewPort.SetCurrent(cWidth, cHeight); + if (svg.opts != null && svg.opts['offsetX'] != null) e.attribute('x', true).value = svg.opts['offsetX']; if (svg.opts != null && svg.opts['offsetY'] != null) e.attribute('y', true).value = svg.opts['offsetY']; if (svg.opts != null && svg.opts['scaleWidth'] != null && svg.opts['scaleHeight'] != null) { var xRatio = 1, yRatio = 1; if (e.attribute('width').hasValue()) xRatio = e.attribute('width').Length.toPixels('x') / svg.opts['scaleWidth']; if (e.attribute('height').hasValue()) yRatio = e.attribute('height').Length.toPixels('y') / svg.opts['scaleHeight']; - + e.attribute('width', true).value = svg.opts['scaleWidth']; - e.attribute('height', true).value = svg.opts['scaleHeight']; + e.attribute('height', true).value = svg.opts['scaleHeight']; e.attribute('viewBox', true).value = '0 0 ' + (cWidth * xRatio) + ' ' + (cHeight * yRatio); e.attribute('preserveAspectRatio', true).value = 'none'; } - + // clear and render if (svg.opts['ignoreClear'] != true) { ctx.clearRect(0, 0, cWidth, cHeight); @@ -2503,88 +2503,88 @@ if (isFirstRender) { isFirstRender = false; if (svg.opts != null && typeof(svg.opts['renderCallback']) == 'function') svg.opts['renderCallback'](); - } + } } - + var waitingForImages = true; if (svg.ImagesLoaded()) { waitingForImages = false; draw(); } - svg.intervalID = setInterval(function() { + svg.intervalID = setInterval(function() { var needUpdate = false; - + if (waitingForImages && svg.ImagesLoaded()) { waitingForImages = false; needUpdate = true; } - + // need update from mouse events? if (svg.opts['ignoreMouse'] != true) { needUpdate = needUpdate | svg.Mouse.hasEvents(); } - + // need update from animations? if (svg.opts['ignoreAnimation'] != true) { for (var i=0; i<svg.Animations.length; i++) { needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE); } } - + // need update from redraw? if (svg.opts != null && typeof(svg.opts['forceRedraw']) == 'function') { if (svg.opts['forceRedraw']() == true) needUpdate = true; } - + // render if needed if (needUpdate) { - draw(); + draw(); svg.Mouse.runEvents(); // run and clear our events } }, 1000 / svg.FRAMERATE); } - + svg.stop = function() { if (svg.intervalID) { clearInterval(svg.intervalID); } } - + svg.Mouse = new (function() { this.events = []; this.hasEvents = function() { return this.events.length != 0; } - + this.onclick = function(x, y) { - this.events.push({ type: 'onclick', x: x, y: y, + this.events.push({ type: 'onclick', x: x, y: y, run: function(e) { if (e.onclick) e.onclick(); } }); } - + this.onmousemove = function(x, y) { this.events.push({ type: 'onmousemove', x: x, y: y, run: function(e) { if (e.onmousemove) e.onmousemove(); } }); - } - + } + this.eventElements = []; - + this.checkPath = function(element, ctx) { for (var i=0; i<this.events.length; i++) { var e = this.events[i]; if (ctx.isPointInPath && ctx.isPointInPath(e.x, e.y)) this.eventElements[i] = element; } } - + this.checkBoundingBox = function(element, bb) { for (var i=0; i<this.events.length; i++) { var e = this.events[i]; if (bb.isPointInBox(e.x, e.y)) this.eventElements[i] = element; - } + } } - + this.runEvents = function() { svg.ctx.canvas.style.cursor = ''; - + for (var i=0; i<this.events.length; i++) { var e = this.events[i]; var element = this.eventElements[i]; @@ -2592,29 +2592,29 @@ e.run(element); element = element.parent; } - } - + } + // done running, clear - this.events = []; + this.events = []; this.eventElements = []; } }); - + return svg; } })(); if (CanvasRenderingContext2D) { CanvasRenderingContext2D.prototype.drawSvg = function(s, dx, dy, dw, dh) { - canvg(this.canvas, s, { - ignoreMouse: true, - ignoreAnimation: true, - ignoreDimensions: true, - ignoreClear: true, - offsetX: dx, - offsetY: dy, - scaleWidth: dw, + canvg(this.canvas, s, { + ignoreMouse: true, + ignoreAnimation: true, + ignoreDimensions: true, + ignoreClear: true, + offsetX: dx, + offsetY: dy, + scaleWidth: dw, scaleHeight: dh }); } -} \ No newline at end of file +} -- Gitblit v1.9.1