SVG drawing Summary

Source: Internet
Author: User
Tags drawtext

It is very convenient to use SVG. Although some functions need to be optimized, it is sufficient for general vector graphs. The following example shows a small program for drawing.

Directly access test. SVG in the browser.

1. Test. SVG

<?xml version="1.0" encoding="UTF-8"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload = "init(evt)"><script type="text/javascript" xlink:href="test.js"></script></svg>

2. Test. js content

VaR DATA = {Facebook: {Total: 2900, Titan: 800, fish: 600, Athena: 400, bossv: 500, dream: 600}, Mixi: {Total: 2200, titan: 500, fish: 400, Athena: 500, bossv: 400, dream: 400}, Kaixin: {Total: 1900, Titan: 300, fish: 400, Athena: 400, bossv: 400, dream: 400}, Renren: {Total: 2300, Titan: 300, fish: 400, Athena: 600, bossv: 600, dream: 400}, netlog: {Total: 2100, Titan: 300, fish: 400, Athena: 500, bossv: 500, dream: 400}, Minik: {Total: 1900, Titan: 300, fish: 400, Athena: 500, bossv: 300, dream: 400}, Daum: {Total: 1400, Titan: 300, fish: 400, Athena: 600, bossv: 500, dream: 400}, Tencent: {Total: 1900, Titan: 300, fish: 400, Athena: 300, bossv: 500, dream: 400 }}; var color = {Facebook: {stroke: "red", filledcolor: "red"}, Mixi: {stroke: "# ff9fff", filledcolor: "# ff9fff"}, Kaixin: {stroke: "# ffbf02", filledcolor: "# ffbf02 "}, Renren: {stroke: "# 836fff", filledcolor: "# 836fff"}, netlog: {stroke: "# 48d1cc", filledcolor: "# 48d1cc"}, minik: {stroke: "#00ced1", filledcolor: "#00ced1"}, Daum: {stroke: "#008b00", filledcolor: "#008b00"}, Tencent: {stroke: "# a4d3ee", filledcolor: "# a4d3ee" }}; var svgns = "http://www.w3.org/2000/svg";/** based on the corresponding payment amount, obtain the radius of the expected circle */function getradius (payment) {var pay = parseint (payment); Re Turn parseint (math. SQRT (Pay); // to be modified} function getmax (JSON) {var max = 0; For (var val in JSON) {If (Val> MAX) {max = Val ;}return Max ;}var svgdocument; function getxy (prexy, space, radius, maxradius) {return prexy + space * 2 + radius + maxradius ;} /* draw SVG cicle and append it to the svgdom */function drawcircle (EVT, RX, Ry, radius, stroke, filledcolor) {If (window. svgdocument = NULL) {svgdocument = Evt.tar get. ownerdocument;} var shape = svgdocument. createelementns (svgns, "circle"); shape. setattributens (null, "CX", RX); shape. setattributens (null, "Cy", ry); shape. setattributens (null, "r", radius); shape. setattributens (null, "stroke", stroke); shape. setattributens (null, "fill", filledcolor); svgdocument.doc umentelement. appendchild (SHAPE);}/* draw SVG line and append it to the svgdom */function drawli Ne (EVT, srcx, srcy, disx, DISY, stroke) {If (window. svgdocument = NULL) {svgdocument = evt.tar get. ownerdocument;} var shape = svgdocument. createelementns (svgns, "line"); shape. setattributens (null, "X1", srcx); shape. setattributens (null, "Y1", srcy); shape. setattributens (null, "X2", disx); shape. setattributens (null, "Y2", DISY); shape. setattributens (null, "stroke", stroke); svgdocument.doc umentelement. appendc Hild (SHAPE);}/* draw SVG textnode and append it to the svgdom */function drawtext (EVT, RX, Ry, radius, content) {var fontsize = getfontsize (RADIUS); If (window. svgdocument = NULL) {svgdocument = evt.tar get. ownerdocument;} var shape = svgdocument. createelementns (svgns, "text"); shape. setattributens (null, "X", RX); shape. setattributens (null, "Y", ry); // shape. setattributens (null, "font-size", fontsize); s HAPE. textcontent = content; svgdocument.doc umentelement. appendchild (SHAPE);}/** Based on the radius, maximum peripheral radius, and space. Obtain available coordinates. For balanced distribution, the average allocation method is used here. * Result = [{"X": 10, Y: 20}, {"X": 40, Y: 60}, {"X": 70, Y: 80 }, {"X": 40, Y: 60}]; **/function getcorfromradius (RX, Ry, radius, space, maxradius, sum) {var result = new array (); vaR r = radius + space + maxradius; // The maximum radius of the external circle var Y0 = Ry-R; result. push ({"X": RX, "Y": y0}); var step = (360/SUM) * Math. PI/180; // radian var start = step; For (VAR I = 0; I <sum-1; I ++) {var rxi = parseint (RX + R * Math. sin (start); var ryi = Parseint (ry-R * Math. cos (start); result. push ({"X": rxi, "Y": ryi}); start + = step;} return result;}/** get the font size based on the radius, to be optimized. **/Function getfontsize (RADIUS) {return parseint (radius/2);}/* draw the total platform map circly */function drawplatformcircle (EVT, platcount, gamecount) {var RX = 900; var ry = 450; var radius0 = 200; var Space = 30; var max0 = 70; var res = getcorfromradius (RX, Ry, radius0, space, max0, platcount); var I = 0; For (VAR platform in data) {var rx0 = res [I]. x; var ry0 = res [I]. y; var max = getmax (dat A [platform]); var stroke = color [platform]. stroke; var filledcolor = color [platform]. filledcolor; var radius = getradius (data [platform]. total); // drawcircle (EVT, rx0, ry0, radius, stroke, filledcolor) of the circle radius of the platform; var J = 0; For (var obj in data [platform]) {If (OBJ! = "Total") {var rest = getcorfromradius (rx0, ry0, radius, space, Max, gamecount); var outerx = rest [J]. x; var outery = rest [J]. y; var outerradius = getradius (data [platform] [OBJ]); drawcircle (EVT, outerx, outery, outerradius, stroke, filledcolor); drawline (EVT, rx0, ry0, outerx, outery, stroke); drawtext (EVT, outerx-outerradius/2, outery, outerradius, OBJ); j ++ ;}} drawtext (EVT, rx0-radius/2, ry0, Rad IUS, platform); I ++; }}/ * draw the total platform map in line */function drawlineplatform (EVT) {var rightindex = 80; var Top = 50; vaR Space = 40; var COUNT = 0; var maxtotalgame = 5; For (VAR platform in data) {count ++; var stroke = color [platform]. stroke; var filledcolor = color [platform]. filledcolor; var max = getmax (data [platform]); var radius = getradius (data [platform]. total); // var RX = Getxy (rightindex, space, radius, max); // platform Circular X axis coordinate var ry = getxy (top, space, radius, max ); // drawcircle (EVT, RX, Ry, radius, stroke, filledcolor), var j = 0; For (var obj in data [platform]) {If (OBJ! = "Total") {var res = getcorfromradius (RX, Ry, radius, space, Max, maxtotalgame); var outerx = res [J]. x; var outery = res [J]. y; var outerradius = getradius (data [platform] [OBJ]); drawline (EVT, RX, Ry, outerx, outery, stroke); drawcircle (EVT, outerx, outery, outerradius, stroke, filledcolor); drawtext (EVT, outerx-outerradius/2, outery, outerradius, OBJ); j ++ ;}} drawtext (EVT, RX-radius/2, ry, radius, platform); rightindex = (RX + radius + space * 2 + max); If (count % 5 = 0) {rightindex = 120; top = (RY + radius + space + max) + 50; // todo: The height is not taken into account.} function Init (EVT) {drawplatformcircle (EVT, 8, 5 );}

Generated:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.