Добавить новую форму на бумаге (Рафаэль JS) - PullRequest
Новая
       0

Добавить новую форму на бумаге (Рафаэль JS)

1 голос
/ 06 июня 2011

Мне нужно добавить новую форму к объекту папа с помощью кнопки. мой 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");
}

Как я могу добавить новую форму (например, прямоугольник) с помощью кнопки? Или как добавить / удалить форму с помощью флажка. То, что я не знаю, как это сделать, это как вызвать бумажный объект с помощью другой функции.

Надеюсь, это понятно, и вы можете мне помочь!

1 Ответ

1 голос
/ 07 июня 2011

ки. Я постараюсь дать ответ. Я надеюсь, что это решение является правильным: мой 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 влево или вправо, я был бы намного счастливее !!!

...