以文本方式查看主题 - 中文XML论坛 - 专业的XML技术讨论区 (http://bbs.xml.org.cn/index.asp) -- 『 SVG/GML/VRML/X3D/XAML 』 (http://bbs.xml.org.cn/list.asp?boardid=21) ---- 基于SVG在线画线 (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=59846) |
-- 作者:jxfml -- 发布时间:3/13/2008 1:35:00 AM -- 基于SVG在线画线 <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd"> <!-- Created by SVGDeveloper 1.0 --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="disable" onload="getSVGDoc(evt)"> <title>SVG - Learning By Coding</title> <desc>SVG-Spezifikation in Beispielen</desc> <defs> <script type="text/javascript"> <![CDATA[ var svgdoc,svgroot,newline,posx,posy,posmin=50,drawing; var linecol="#000",linewidth="1px",check=false; var svgns="http://www.w3.org/2000/svg"; function getSVGDoc(load_evt) { svgdoc=load_evt.target.ownerDocument; svgroot=svgdoc.rootElement; drawing=svgdoc.getElementById("drawing"); svgroot.addEventListener("mousedown",MDown,false); svgroot.addEventListener("mousemove",MMove,false); svgroot.addEventListener("mouseup",MUp,false); } function MDown(mousedown_event) { Coords(mousedown_event); newline=svgdoc.createElementNS(svgns,"line"); newline.setAttribute("x1",posx); newline.setAttribute("x2",posx); newline.setAttribute("y1",posy); newline.setAttribute("y2",posy); newline.setAttribute("stroke",linecol); newline.setAttribute("stroke-width",linewidth); check=true; } function MMove(mousemove_event) { if(check) { Coords(mousemove_event); newline.setAttribute("x2",posx); newline.setAttribute("y2",posy); drawing.appendChild(newline); } } function MUp() { check=false; } function Coords(mouse_event) { posx=mouse_event.clientX; posy=mouse_event.clientY; if(posx<posmin)posx=posmin; if(posy<posmin)posy=posmin; if(posx>640+posmin)posx=640+posmin; if(posy>480+posmin)posy=480+posmin; } function SetLineColor(mousedown_event) { linecol=mousedown_event.target.style.getPropertyValue("fill"); svgdoc.getElementById("aktline").style.setProperty("stroke",linecol,""); } function SetLineWidth(mousedown_event) { linewidth=mousedown_event.target.style.getPropertyValue("stroke-width"); svgdoc.getElementById("aktline").style.setProperty("stroke-width",linewidth,""); } ]]> </script> </defs> <text x="30" y="30" style="fill: #000; font-size: 24px"> Linien zeichnen (mit Wahl von Farbe und Strichst?rke)</text> <rect x="50" y="50" width="640" height="480" rx="5" ry="5" style="fill: #FFF; stroke: #000"/> <g onmousedown="SetLineColor(evt)"> <rect x="30" y="60" width="10" height="10" style="fill: #FF0; stroke: #000"/> <rect x="30" y="80" width="10" height="10" style="fill: #F00; stroke: #000"/> <rect x="30" y="100" width="10" height="10" style="fill: #090; stroke: #000"/> <rect x="30" y="120" width="10" height="10" style="fill: #00C; stroke: #000"/> <rect x="30" y="140" width="10" height="10" style="fill: #000; stroke: #000"/> </g> <g onmousedown="SetLineWidth(evt)"> <line x1="30" y1="180" x2="40" y2="180" style="stroke: #000; stroke-width: 1px"/> <line x1="30" y1="200" x2="40" y2="200" style="stroke: #000; stroke-width: 2px"/> <line x1="30" y1="220" x2="40" y2="220" style="stroke: #000; stroke-width: 3px"/> <line x1="30" y1="240" x2="40" y2="240" style="stroke: #000; stroke-width: 4px"/> <line x1="30" y1="260" x2="40" y2="260" style="stroke: #000; stroke-width: 5px"/> </g> <line id="aktline" x1="18" y1="58" x2="18" y2="262" style="stroke: #000; stroke-width: 1px"/> <!-- Ausgabe der Zeichnungsobjekte --> <g id="drawing"></g> </svg> |
-- 作者:gprs -- 发布时间:3/14/2008 10:39:00 PM -- 是FLEX的代码吧? |
-- 作者:jxfml -- 发布时间:3/16/2008 2:54:00 PM -- 不是呀,是.SVG文件,在浏览器里可以打开. |
-- 作者:ansly20060 -- 发布时间:9/28/2012 10:29:00 AM -- 能实现左边点击一个,就在画布中添加一个图元吗 |
W 3 C h i n a ( since 2003 ) 旗 下 站 点 苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》 |
62.500ms |