vml_attach.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. dojo.require("dojox.gfx.vml");
  7. dojo.experimental("dojox.gfx.vml_attach");
  8. (function(){
  9. var g = dojox.gfx, m = g.matrix, vml = g.vml;
  10. vml.attachNode = function(node){
  11. // summary: creates a shape from a Node
  12. // node: Node: an VML node
  13. if(!node) return null;
  14. var s = null;
  15. switch(node.tagName.toLowerCase()){
  16. case vml.Rect.nodeType:
  17. s = new vml.Rect(node);
  18. attachRect(s);
  19. break;
  20. case vml.Ellipse.nodeType:
  21. if(node.style.width == node.style.height){
  22. s = new vml.Circle(node);
  23. attachCircle(s);
  24. }else{
  25. s = new vml.Ellipse(node);
  26. attachEllipse(s);
  27. }
  28. break;
  29. case vml.Path.nodeType:
  30. switch(node.getAttribute("dojoGfxType")){
  31. case "line":
  32. s = new vml.Line(node);
  33. attachLine(s);
  34. break;
  35. case "polyline":
  36. s = new vml.Polyline(node);
  37. attachPolyline(s);
  38. break;
  39. case "path":
  40. s = new vml.Path(node);
  41. attachPath(s);
  42. break;
  43. case "text":
  44. s = new vml.Text(node);
  45. attachText(s);
  46. attachFont(s);
  47. attachTextTransform(s);
  48. break;
  49. case "textpath":
  50. s = new vml.TextPath(node);
  51. attachPath(s);
  52. attachText(s);
  53. attachFont(s);
  54. break;
  55. }
  56. break;
  57. case vml.Image.nodeType:
  58. switch(node.getAttribute("dojoGfxType")){
  59. case "image":
  60. s = new vml.Image(node);
  61. attachImage(s);
  62. attachImageTransform(s);
  63. break;
  64. }
  65. break;
  66. default:
  67. //console.debug("FATAL ERROR! tagName = " + node.tagName);
  68. return null;
  69. }
  70. if(!(s instanceof vml.Image)){
  71. attachFill(s);
  72. attachStroke(s);
  73. if(!(s instanceof vml.Text)){
  74. attachTransform(s);
  75. }
  76. }
  77. return s; // dojox.gfx.Shape
  78. };
  79. vml.attachSurface = function(node){
  80. // summary: creates a surface from a Node
  81. // node: Node: an VML node
  82. var s = new vml.Surface();
  83. s.clipNode = node;
  84. var r = s.rawNode = node.firstChild;
  85. var b = r.firstChild;
  86. if(!b || b.tagName != "rect"){
  87. return null; // dojox.gfx.Surface
  88. }
  89. s.bgNode = r;
  90. return s; // dojox.gfx.Surface
  91. };
  92. var attachFill = function(object){
  93. // summary: deduces a fill style from a node.
  94. // object: dojox.gfx.Shape: an VML shape
  95. var fillStyle = null, r = object.rawNode, fo = r.fill;
  96. if(fo.on && fo.type == "gradient"){
  97. var fillStyle = dojo.clone(g.defaultLinearGradient),
  98. rad = m._degToRad(fo.angle);
  99. fillStyle.x2 = Math.cos(rad);
  100. fillStyle.y2 = Math.sin(rad);
  101. fillStyle.colors = [];
  102. var stops = fo.colors.value.split(";");
  103. for(var i = 0; i < stops.length; ++i){
  104. var t = stops[i].match(/\S+/g);
  105. if(!t || t.length != 2){ continue; }
  106. fillStyle.colors.push({offset: vml._parseFloat(t[0]), color: new dojo.Color(t[1])});
  107. }
  108. }else if(fo.on && fo.type == "gradientradial"){
  109. var fillStyle = dojo.clone(g.defaultRadialGradient),
  110. w = parseFloat(r.style.width), h = parseFloat(r.style.height);
  111. fillStyle.cx = isNaN(w) ? 0 : fo.focusposition.x * w;
  112. fillStyle.cy = isNaN(h) ? 0 : fo.focusposition.y * h;
  113. fillStyle.r = isNaN(w) ? 1 : w / 2;
  114. fillStyle.colors = [];
  115. var stops = fo.colors.value.split(";");
  116. for(var i = stops.length - 1; i >= 0; --i){
  117. var t = stops[i].match(/\S+/g);
  118. if(!t || t.length != 2){ continue; }
  119. fillStyle.colors.push({offset: vml._parseFloat(t[0]), color: new dojo.Color(t[1])});
  120. }
  121. }else if(fo.on && fo.type == "tile"){
  122. var fillStyle = dojo.clone(g.defaultPattern);
  123. fillStyle.width = g.pt2px(fo.size.x); // from pt
  124. fillStyle.height = g.pt2px(fo.size.y); // from pt
  125. fillStyle.x = fo.origin.x * fillStyle.width;
  126. fillStyle.y = fo.origin.y * fillStyle.height;
  127. fillStyle.src = fo.src;
  128. }else if(fo.on && r.fillcolor){
  129. // a color object !
  130. fillStyle = new dojo.Color(r.fillcolor+"");
  131. fillStyle.a = fo.opacity;
  132. }
  133. object.fillStyle = fillStyle;
  134. };
  135. var attachStroke = function(object) {
  136. // summary: deduces a stroke style from a node.
  137. // object: dojox.gfx.Shape: an VML shape
  138. var r = object.rawNode;
  139. if(!r.stroked){
  140. object.strokeStyle = null;
  141. return;
  142. }
  143. var strokeStyle = object.strokeStyle = dojo.clone(g.defaultStroke),
  144. rs = r.stroke;
  145. strokeStyle.color = new dojo.Color(r.strokecolor.value);
  146. strokeStyle.width = g.normalizedLength(r.strokeweight+"");
  147. strokeStyle.color.a = rs.opacity;
  148. strokeStyle.cap = this._translate(this._capMapReversed, rs.endcap);
  149. strokeStyle.join = rs.joinstyle == "miter" ? rs.miterlimit : rs.joinstyle;
  150. strokeStyle.style = rs.dashstyle;
  151. };
  152. var attachTransform = function(object) {
  153. // summary: deduces a transformation matrix from a node.
  154. // object: dojox.gfx.Shape: an VML shape
  155. var s = object.rawNode.skew, sm = s.matrix, so = s.offset;
  156. object.matrix = m.normalize({
  157. xx: sm.xtox,
  158. xy: sm.ytox,
  159. yx: sm.xtoy,
  160. yy: sm.ytoy,
  161. dx: g.pt2px(so.x),
  162. dy: g.pt2px(so.y)
  163. });
  164. };
  165. var attachGroup = function(object){
  166. // summary: reconstructs all group shape parameters from a node (VML).
  167. // object: dojox.gfx.Shape: an VML shape
  168. // attach the background
  169. object.bgNode = object.rawNode.firstChild; // TODO: check it first
  170. };
  171. var attachRect = function(object){
  172. // summary: builds a rectangle shape from a node.
  173. // object: dojox.gfx.Shape: an VML shape
  174. // a workaround for the VML's arcsize bug: cannot read arcsize of an instantiated node
  175. var r = object.rawNode, arcsize = r.outerHTML.match(/arcsize = \"(\d*\.?\d+[%f]?)\"/)[1],
  176. style = r.style, width = parseFloat(style.width), height = parseFloat(style.height);
  177. arcsize = (arcsize.indexOf("%") >= 0) ? parseFloat(arcsize) / 100 : vml._parseFloat(arcsize);
  178. // make an object
  179. object.shape = g.makeParameters(g.defaultRect, {
  180. x: parseInt(style.left),
  181. y: parseInt(style.top),
  182. width: width,
  183. height: height,
  184. r: Math.min(width, height) * arcsize
  185. });
  186. };
  187. var attachEllipse = function(object){
  188. // summary: builds an ellipse shape from a node.
  189. // object: dojox.gfx.Shape: an VML shape
  190. var style = object.rawNode.style,
  191. rx = parseInt(style.width ) / 2,
  192. ry = parseInt(style.height) / 2;
  193. object.shape = g.makeParameters(g.defaultEllipse, {
  194. cx: parseInt(style.left) + rx,
  195. cy: parseInt(style.top ) + ry,
  196. rx: rx,
  197. ry: ry
  198. });
  199. };
  200. var attachCircle = function(object){
  201. // summary: builds a circle shape from a node.
  202. // object: dojox.gfx.Shape: an VML shape
  203. var style = object.rawNode.style, r = parseInt(style.width) / 2;
  204. object.shape = g.makeParameters(g.defaultCircle, {
  205. cx: parseInt(style.left) + r,
  206. cy: parseInt(style.top) + r,
  207. r: r
  208. });
  209. };
  210. var attachLine = function(object){
  211. // summary: builds a line shape from a node.
  212. // object: dojox.gfx.Shape: an VML shape
  213. var shape = object.shape = dojo.clone(g.defaultLine),
  214. p = object.rawNode.path.v.match(g.pathVmlRegExp);
  215. do{
  216. if(p.length < 7 || p[0] != "m" || p[3] != "l" || p[6] != "e"){ break; }
  217. shape.x1 = parseInt(p[1]);
  218. shape.y1 = parseInt(p[2]);
  219. shape.x2 = parseInt(p[4]);
  220. shape.y2 = parseInt(p[5]);
  221. }while(false);
  222. };
  223. var attachPolyline = function(object){
  224. // summary: builds a polyline/polygon shape from a node.
  225. // object: dojox.gfx.Shape: an VML shape
  226. var shape = object.shape = dojo.clone(g.defaultPolyline),
  227. p = object.rawNode.path.v.match(g.pathVmlRegExp);
  228. do{
  229. if(p.length < 3 || p[0] != "m"){ break; }
  230. var x = parseInt(p[0]), y = parseInt(p[1]);
  231. if(isNaN(x) || isNaN(y)){ break; }
  232. shape.points.push({x: x, y: y});
  233. if(p.length < 6 || p[3] != "l"){ break; }
  234. for(var i = 4; i < p.length; i += 2){
  235. x = parseInt(p[i]);
  236. y = parseInt(p[i + 1]);
  237. if(isNaN(x) || isNaN(y)){ break; }
  238. shape.points.push({x: x, y: y});
  239. }
  240. }while(false);
  241. };
  242. var attachImage = function(object){
  243. // summary: builds an image shape from a node.
  244. // object: dojox.gfx.Shape: an VML shape
  245. object.shape = dojo.clone(g.defaultImage);
  246. object.shape.src = object.rawNode.firstChild.src;
  247. };
  248. var attachImageTransform = function(object) {
  249. // summary: deduces a transformation matrix from a node.
  250. // object: dojox.gfx.Shape: an VML shape
  251. var mm = object.rawNode.filters["DXImageTransform.Microsoft.Matrix"];
  252. object.matrix = m.normalize({
  253. xx: mm.M11,
  254. xy: mm.M12,
  255. yx: mm.M21,
  256. yy: mm.M22,
  257. dx: mm.Dx,
  258. dy: mm.Dy
  259. });
  260. };
  261. var attachText = function(object){
  262. // summary: builds a text shape from a node.
  263. // object: dojox.gfx.Shape: an VML shape
  264. var shape = object.shape = dojo.clone(g.defaultText),
  265. r = object.rawNode, p = r.path.v.match(g.pathVmlRegExp);
  266. do{
  267. if(!p || p.length != 7){ break; }
  268. var c = r.childNodes, i = 0;
  269. for(; i < c.length && c[i].tagName != "textpath"; ++i);
  270. if(i >= c.length){ break; }
  271. var s = c[i].style;
  272. shape.text = c[i].string;
  273. switch(s["v-text-align"]){
  274. case "left":
  275. shape.x = parseInt(p[1]);
  276. shape.align = "start";
  277. break;
  278. case "center":
  279. shape.x = (parseInt(p[1]) + parseInt(p[4])) / 2;
  280. shape.align = "middle";
  281. break;
  282. case "right":
  283. shape.x = parseInt(p[4]);
  284. shape.align = "end";
  285. break;
  286. }
  287. shape.y = parseInt(p[2]);
  288. shape.decoration = s["text-decoration"];
  289. shape.rotated = s["v-rotate-letters"].toLowerCase() in vml._bool;
  290. shape.kerning = s["v-text-kern"].toLowerCase() in vml._bool;
  291. return;
  292. }while(false);
  293. object.shape = null;
  294. };
  295. var attachFont = function(object){
  296. // summary: deduces a font style from a node.
  297. // object: dojox.gfx.Shape: an VML shape
  298. var fontStyle = object.fontStyle = dojo.clone(g.defaultFont),
  299. c = object.rawNode.childNodes, i = 0;
  300. for(; i < c.length && c[i].tagName == "textpath"; ++i);
  301. if(i >= c.length){
  302. object.fontStyle = null;
  303. return;
  304. }
  305. var s = c[i].style;
  306. fontStyle.style = s.fontstyle;
  307. fontStyle.variant = s.fontvariant;
  308. fontStyle.weight = s.fontweight;
  309. fontStyle.size = s.fontsize;
  310. fontStyle.family = s.fontfamily;
  311. };
  312. var attachTextTransform = function(object) {
  313. // summary: deduces a transformation matrix from a node.
  314. // object: dojox.gfx.Shape: an VML shape
  315. attachTransform(object);
  316. var matrix = object.matrix, fs = object.fontStyle;
  317. // see comments in _getRealMatrix()
  318. if(matrix && fs){
  319. object.matrix = m.multiply(matrix, {dy: g.normalizedLength(fs.size) * 0.35});
  320. }
  321. };
  322. var attachPath = function(object){
  323. // summary: builds a path shape from a Node.
  324. // object: dojox.gfx.Shape: an VML shape
  325. var shape = object.shape = dojo.clone(g.defaultPath),
  326. p = object.rawNode.path.v.match(g.pathVmlRegExp),
  327. t = [], skip = false, map = g.Path._pathVmlToSvgMap;
  328. for(var i = 0; i < p.length; ++p){
  329. var s = p[i];
  330. if(s in map) {
  331. skip = false;
  332. t.push(map[s]);
  333. } else if(!skip){
  334. var n = parseInt(s);
  335. if(isNaN(n)){
  336. skip = true;
  337. }else{
  338. t.push(n);
  339. }
  340. }
  341. }
  342. var l = t.length;
  343. if(l >= 4 && t[l - 1] == "" && t[l - 2] == 0 && t[l - 3] == 0 && t[l - 4] == "l"){
  344. t.splice(l - 4, 4);
  345. }
  346. if(l){
  347. shape.path = t.join(" ");
  348. }
  349. };
  350. })();