系统流程图主页面

1 year ago · 9c29a28007
parent 374d63bb0e
commit 9c29a28007
1 changed files with 189 additions and 0 deletions
--- a/flowchart.html
+++ b/flowchart.html
@ -0,0 +1,189 @@
 <!DOCTYPE html>
 <html>
 <head lang="en">
    <meta charset="UTF-8">
    <title>流程图绘制考试练习工具（v1.0 作者：liugw@mail.imut.edu.cn)</title>
    <link rel="stylesheet" href="flowchart.css">
    <script type="text/javascript" src="flowchart.js"></script>
    <style type="text/css">
        #canvas{
            border: 1px solid #333;
            display: block;
            margin:20px 20px;
        }
        #title2{
            background: gray;
            color: white;
            width:auto;
            height:20px;
            position:absolute;
            top:8px;
            left:50px;
        }
        #test{
            border: 1px solid #333;
            width:200px;
            height:150px;
            position:absolute;
            bottom:5px;
            left: 28px;
        }
        #title1{
            background: gray;
            color: white;
            width:auto;
            height:20px;
            position:absolute;
            left:50px;
            bottom:150px;
        }
        #back{
            border: 1px solid #333;
            width:200px;
            height:600px;
            position:absolute;
            right:0px;
            top:20px;
        }
        #title{
            background: gray;
            color: white;
            width:auto;
            height:20px;
            position:absolute;
            right:130px;
            top:8px;
        }
        #color{
            width: 32px;
            height:32px;
            position:absolute;
            right:150px;
            top:106px;
        }
        #bcolor{
            width: 32px;
            height:32px;
            position:absolute;
            right:100px;
            top:106px;
        }
        #range{
            width:80px;
            height:32px;
            position:absolute;
            right:10px;
            top:106px;
        }
        #undo{
            width:50px;
            height:25px;
            position:absolute;
            right:130px;
            top:56px;
            cursor:pointer;
            text-align: center;            
        }
        #redo{
            width:50px;
            height:25px;
            position:absolute;
            right:70px;
            top:56px;
            cursor:pointer;
            text-align: center;            
        }
        #save{
            width:50px;
            height:25px;
            position:absolute;
            right:10px;
            top:56px;
            cursor:pointer;
            text-align: center;            
        }
        #text{
            width: 180px;
            height:25px;
            position:absolute;
            bottom:10px;
            right:10px;
        }
    </style>
 </head>
 <body background-color="rgba(0,0,0,0.5)">
 <div class="box">
    <canvas id="canvas" width="1000" height="600"></canvas>
    <div id="title2">绘图区</div>
    <div id="back"></div>
    <div id="title">工具箱</div>
    <input type="color" id="color" title="前景色" value="#000000"/>
    <input type="color" id="bcolor" title="背景色" value="#FFFFFF"/>
    <input type="range" id="range" min="1" max="10" title="画笔粗细" value="1"/>
    <input type="button" id="undo" onclick="undo();" title="撤销上一步操作" value="撤销" disabled/>
    <input type="button" id="redo" onclick="redo();" title="恢复上一步操作" value="重做" disabled/>
    <input type="button" id="save" onclick="save();" title="保存绘制结果" value="保存" disabled/>
    <div id="tools">
    </div>
    <input type="text" id="text" value="开始" title="输入文本" hidden/>
    <div id="test">
        &nbsp;<br/>
        1<br/>
        2<br/>
    </div>
    <div id="title1">题目要求</div>
 </div> 
 <script type="text/javascript">
    //画布对象
    var canvas=document.getElementById("canvas");
    //工具箱对象
    var back=document.getElementById("back");
    //题目对象
    var test=document.getElementById("test");
    //绘画操作对象
    var cxt=canvas.getContext("2d");
    //前景色对象
    var color=document.getElementById("color");
    //背景色对象
    var bcolor = document.getElementById("bcolor");
    //画笔大小对象
    var size=document.getElementById("range");
    //加载工具
    var tools = document.getElementById("tools");
    loadTools(tools);
    //文本对象
    var text = document.getElementById("text");
    text.hidden = false;
    //界面自适应处理
    function resize(){
        canvas.width = window.innerWidth - 250;
        canvas.height = window.innerHeight - 200;
        back.style.height = (window.innerHeight - 28) + "px";
        test.style.width = (window.innerWidth - 250) + "px";
    }
    resize();
    //窗口自适应事件
    window.onresize = function(e){
        resize();
    }
    //鼠标按下
    canvas.onmousedown= function (e) {
        myMouseDown(e, this);
    };
    //鼠标移动
    canvas.onmousemove= function (e) {
        myMouseMove(e, this);
    }
    //鼠标松开
    canvas.onmouseup= function (e) {
        myMouseUp(e, this);
    }
 </script>
 </body>
 </html>