中文XML论坛 - 专业的XML技术讨论区--显示贴子

以文本方式查看主题

-  中文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">

<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"/>
  
  <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