在纸上添加新形状（Raphael JS）

我需要使用按钮将新形状添加到papaer对象。我的html：在纸上添加新形状（Raphael JS）

<html> 
    <head> 
     <title>Calculator</title> 
     <script type="text/javascript" src="raphael.js"></script> 
     <script type="text/javascript" src="calc.js"></script> 
     <style type="text/css"> 
      #canvas_container { 
       width: 500px; 
       height: 300px; 
       border: 1px solid #aaa; 
       background-color: #cacaca; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas_container"></div> 

     <FORM NAME="myform" ACTION="" METHOD="GET"> 
     Width: 
     <INPUT TYPE="text" NAME="width" VALUE=""> 
     <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)"> 
     </FORM> 

    </body> 
</html>

我calc.js是：

window.onload = function() { 

} 

function testResults (form){ 
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500); 
    var small = paper.path("M10 270 L 60 270 M10 265 L 10 275 M60 265 L60 275"); 
    var txtbig = paper.text(230, 210, form.width.value+" m"); 

    var big = paper.path("M10 200 L 480 200"); 
    var txtsmall = paper.text(30, 280, ((form.width.value)*50/470).toFixed(2)+" m"); 
}

我怎么能添加使用按钮（例如矩形）的新造型？或者如何使用复选框添加/删除形状。我不知道如何做的是如何使用另一个函数调用纸张对象。

希望它是明确的，你可以帮助我！

来源

2011-06-06 gerpaick

好的。我会尽力给出答案。我希望这个解决方案是正确的：我的html：

<html> 
    <head> 
     <title>Calculator</title> 
     <script type="text/javascript" src="raphael.js"></script> 
     <script type="text/javascript" src="calc.js"></script> 
     <style type="text/css"> 
      #canvas { 
       width: 500px; 
       height: 300px; 
       border: 1px solid #aaa; 
       background-color: #cacaca; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas"></div> 
     Width: 
     <INPUT TYPE="text" id="width" NAME="szer" VALUE="" size="4" /> 
     <button id="run" type="button">Go</button><br /> 
     gate 
     <input type="checkbox" name="gate" id="gate" value="Gate" /> 
     <INPUT TYPE="button" NAME="buttonlt" Value="<" id="gatelt"> 
     <INPUT TYPE="button" NAME="buttonrt" Value=">" id="gatert"> 

     </FORM> 
    </body> 
</html>

和我calc.js：

window.onload = function() { 
       var paper = Raphael("canvas", 500, 500), 
        btn = document.getElementById("run"), 
        gate = document.getElementById("gate"), 
        width = document.getElementById("width"), 
        gatechk = document.getElementById("gate"); 
       var gateDesign = null; 
       var gatelt = document.getElementById("gatelt"); 
       var gatert = document.getElementById("gatert"); 



       (btn.onclick = function() { 
        paper.clear(); 
        try { 
         var txtbig = paper.text(230, 210, width.value+" m"); 
         var txtsmall = paper.text(30, 280, ((width.value)*50/470).toFixed(2)+" m"); 
         var small = paper.path("M10 270 L 60 270 M10 265 L 10 275 M60 265 L60 275"); 
         var big = paper.path("M10 200 L 480 200"); 
         var txt1m = paper.text(130, 280, "1 m"); 
         var small1m = paper.path("M130 265 L 130 275 M 130 270 L "+(130+(470/width.value))+" 270 M "+(130+(470/width.value))+" 265 L "+(130+(470/width.value))+" 275"); 
         var txt1px= paper.text(270, 280, "1 px ="+(width.value/470).toFixed(2)+" m"); 

         gateDesign = paper.rect(10, 185, 15, 10); 
         gateDesign.hide(); 

        } catch (e) { 
         alert(e.message || e); 
        } 
       })(); 

       (gate.onclick = function() { 
        try { 
         //var big2 = paper.path("M10 180 L 480 180"); 
        } catch (e) { 
         alert(e.message || e); 
        } 
       })(); 

       (gatechk.onclick = function() { 
        try { 
         if(this.checked==true){ 
                  gateDesign.show(); 
         } 
         if(this.checked==false){ 
          gateDesign.hide(); 
         } 
        } catch (e) { 
         alert(e.message || e); 
        } 
       })(); 
       (gatelt.onclick = function() { 
        try { 
         //HOW TO MOVE ON THE LEFT??? 
        } catch (e) { 
         alert(e.message || e); 
        } 
       })(); 

      };

我知道，这是可以做到很多好过得多，所以我希望你能给我一些指导方针。

如果您可以帮助设置我的gatelt/rt按钮来移动左侧或右侧的gateDesign，我会更加快乐！

来源

2011-06-06 22:57:35 gerpaick

在纸上添加新形状（Raphael JS）

回答

相关问题