Question

我需要使用按钮为papaer对象添加新形状。我的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_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");
}

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

希望它很清楚，你可以帮助我！

Answer 1

确定。我会尽力给出答案。我希望这个解决方案是正确的：我的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，我会更开心!!!

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

1 个答案: