検索

ホームページ  >  記事  >  ウェブフロントエンド  >  html5を使ってWindowsに似たお絵描きソフトを作る方法

html5を使ってWindowsに似たお絵描きソフトを作る方法

一个新手
一个新手オリジナル
2017-10-19 09:56:212088ブラウズ

この描画ツールはまだ完成していませんが、一般的な構造と一般的な単純なグラフィック描画機能が実装されています:

1. 直線、円、長方形、正多角形を描画できます [完成]

2. 塗りつぶしの色およびストロークの色の選択 [完了]

3、ストロークと塗りつぶし機能の選択 [完了]

以降のバージョン:

消しゴム、座標系、線の設定、矢印、その他のプロセス グラフィック、トリミングおよび調整グラフィック。 。 。 。 。

最終目標:

プロセス描画ソフトウェア

以前、友人が私のブログにメッセージを残しているのを見て、次のように言いました。今日は小さなプロトタイプです!

完全なプロトタイプ コードを自分で開いて、ローカル テストにコピーしてください。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>windows简易画图工具 - by ghostwu</title>
</head>

<body>
    <div class="paint">
        <div class="paint-header">
            <ul>
                <li class="active">形状</li>
                <li>颜色</li>
                <li>绘制类型</li>
                <li>线条宽度</li>
                <li>橡皮擦</li>
            </ul>
        </div>
        <div class="paint-body">
            <div class="siderbar">
                <div class="item active" data-type="paint-shape">
                    <ul>
                        <li class="active" data-role="line">线条</li>
                        <li data-role="circle">圆形</li>
                        <li data-role="rect">矩形</li>
                        <li data-role="polygon">正多边形</li>
                        <li data-role="arrow">箭头</li>
                    </ul>
                </div>
                <div class="item" data-type="paint-color">
                    <ul>
                        <li data-role="strokeStyle">
                            <input type="color" data-role="strokeStyle">
                        </li>
                        <li data-role="fillStyle">
                            <input type="color" data-role="fillStyle">
                        </li>
                    </ul>
                </div>
                <div class="item" data-type="paint-type">
                    <ul>
                        <li data-role="stroke">描边</li>
                        <li data-role="fill">填充</li>
                    </ul>
                </div>
                <div class="item" data-type="paint-line">
                    <ul>
                        <li data-role="1">小号</li>
                        <li data-role="4">中号</li>
                        <li data-role="7">大号</li>
                        <li>
                            <input type="number" data-role="line-size" placeholder="请输入数字">
                        </li>
                    </ul>
                </div>
                <div class="item" data-type="paint-erase">
                    <ul>
                        <li>
                            <input type="number" data-role="erase-size" placeholder="请输入数字">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>// <![CDATA[
        var oPaintBody = document.querySelector( &#39;.paint-body&#39; );
        var oC = document.createElement( &#39;canvas&#39; );
        oC.setAttribute( &#39;width&#39;, &#39;830&#39; );
        oC.setAttribute( &#39;height&#39;, &#39;500&#39; );
        oPaintBody.appendChild( oC );
        var aHeaderLi = document.querySelectorAll(&#39;.paint-header li&#39;),
            aItem = document.querySelectorAll(&#39;.paint-body .item&#39;),
            oCanvas = document.querySelector(&#39;.paint canvas&#39;),
            oGc = oCanvas.getContext(&#39;2d&#39;),
            cWidth = oCanvas.width, cHeight = oCanvas.height,
            curItem = aItem[0],
            aItemLi = curItem.querySelectorAll(&#39;li&#39;);

        for (let i = 0, len = aHeaderLi.length; i < len; i++) { //头部选项卡切换功能
            aHeaderLi[i].onclick = function () {
                for (let j = 0; j < len; j++) {
                    aHeaderLi[j].classList.remove(&#39;active&#39;);
                    aItem[j].style.display = &#39;none&#39;;
                }
                aItem[i].style.display = "block";
                this.classList.add(&#39;active&#39;);
                curItem = aItem[i];
                aItemLi = curItem.querySelectorAll(&#39;li&#39;);
                activeItem(aItemLi);
            }
        }
        activeItem(aItemLi);
        var role = null;
        function activeItem(aItemLi) { //canvas左侧选项卡切换功能
            for (let i = 0, len = aItemLi.length; i < len; i++) {
                aItemLi[i].onclick = function () {
                    checkPaintType(this); //绘制类型
                    for (let j = 0; j < len; j++) {
                        aItemLi[j].classList.remove(&#39;active&#39;);
                    }
                    this.classList.add(&#39;active&#39;);
                }
            }
        }

        function Shape(canvasObj, cxtObj, w, h) {
            this.oCanvas = canvasObj;
            this.oGc = cxtObj;
            this.oCanvas.width = w;
            this.oCanvas.height = h;
            this.fillStyle = &#39;#000&#39;;
            this.storkeStyle = &#39;#000&#39;;
            this.lineWidth = 1;
            this.drawType = &#39;line&#39;;
            this.paintType = &#39;stroke&#39;;
            this.nums = 6; //正多边形的边数
        }

        Shape.prototype = {
            init: function () {
                this.oGc.fillStyle = this.fillStyle;
                this.oGc.strokeStyle = this.strokeStyle;
                this.oGc.lineWidth = this.lineWidth;
            },
            draw: function () {
                var _this = this;
                this.oCanvas.onmousedown = function (ev) {
                    _this.init();
                    var oEvent = ev || event,
                        startX = oEvent.clientX - _this.oCanvas.offsetLeft,
                        startY = oEvent.clientY - _this.oCanvas.offsetTop;
                    _this.oCanvas.onmousemove = function (ev) {
                        _this.oGc.clearRect(0, 0, _this.oCanvas.width, _this.oCanvas.height);
                        var oEvent = ev || event,
                            endX = oEvent.clientX - _this.oCanvas.offsetLeft,
                            endY = oEvent.clientY - _this.oCanvas.offsetTop;
                        _this[_this.drawType](startX, startY, endX, endY);
                    };
                    _this.oCanvas.onmouseup = function () {
                        _this.oCanvas.onmousemove = null;
                        _this.oCanvas.onmouseup = null;
                    }
                }
            },
            line: function (x1, y1, x2, y2) {
                this.oGc.beginPath();
                this.oGc.moveTo(x1, y1);
                this.oGc.lineTo(x2, y2);
                this.oGc.closePath();
                this.oGc.stroke();
            },
            circle: function (x1, y1, x2, y2) {
                this.oGc.beginPath();
                var r = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
                this.oGc.arc(x1, y1, r, 0, 2 * Math.PI, false);
                this.oGc.closePath();
                this.oGc[this.paintType]();
            },
            rect: function (x1, y1, x2, y2) {
                this.oGc.beginPath();
                this.oGc.rect(x1, y1, x2 - x1, y2 - y1);
                this.oGc[this.paintType]();
            },
            polygon: function (x1, y1, x2, y2) {
                var angle = 360 / this.nums * Math.PI / 180;//边对应的角的弧度
                var r = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
                this.oGc.beginPath();
                for (var i = 0; i < this.nums; i++) {
                    this.oGc.lineTo(x1 + r * Math.cos(angle * i), y1 + r * Math.sin(angle * i));
                }
                this.oGc.closePath();
                this.oGc[this.paintType]();
            }
        }

        var oShape = new Shape(oCanvas, oGc, cWidth, cHeight);
        function checkPaintType(liType) {
            var dataType = liType.parentNode.parentNode.dataset.type;
            var curType = liType.dataset.role;
            switch (dataType) {
                case &#39;paint-shape&#39;: //形状
                    oShape.drawType = curType;
                    if (curType == &#39;polygon&#39;) {
                        oShape.nums = prompt("请输入边数", 6);
                    }
                    oShape.draw();
                    break;
                case &#39;paint-color&#39;: //绘制颜色
                    liType.children[0].onchange = function () {
                        oShape[this.dataset.role] = this.value;
                    }
                    oShape.draw();
                    break;
                case &#39;paint-type&#39;: //绘制类型
                    oShape.paintType = curType;
                    oShape.draw();
                    break;
            }
        }
// ]]></script>
    <style>
        .paint * {
            margin: 0;
            padding: 0;
        }

        .paint ul,
        .paint li {
            list-style: none;
        }

        .paint li:hover {
            cursor: pointer;
        }

        .paint {
            width: 980px;
            margin: 20px auto;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .paint .paint-header ul {
            width: 980px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .paint .paint-header li {
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .paint li.active {
            box-shadow: #666 0px 1px 8px inset;
        }

        .paint .paint-body .siderbar {
            float: left;
            width: 150px;
            height: 500px;
        }

        .paint .paint-body .item {
            width: 150px;
            overflow: hidden;
            display: none;
            height: 500px;
            border-right: 1px solid #ccc;
        }

        .paint .paint-body canvas {
            float: right;
        }

        .paint .paint-body .item li {
            height: 40px;
            text-align: center;
            border-bottom: 1px solid #ccc;
            line-height: 40px;
        }

        .paint .paint-body .active {
            display: block;
        }
    </style>
</body>
プロセス設計、後で実行する機能に関しては、アイデアは基本的にそこにあります。コンパスがここにあります、欲しいです この究極の目標を達成するには、描画ツールを完成させることで目標に近づく必要があります。まずは現在の簡単な機能を体験してみましょう。 [

キャンバスをサポートするブラウザが必要です

] で通常通り絵を描くことができます
主にターゲットのプロトタイプ アーキテクチャについて話しましょう:

1、グラフィック描画部分、私はカプセル化します。 Shape クラスを作成しました

function Shape(canvasObj, cxtObj, w, h) {
        this.oCanvas = canvasObj;
        this.oGc = cxtObj;
        this.oCanvas.width = w;
        this.oCanvas.height = h;
        this.fillStyle = &#39;#000&#39;;
        this.storkeStyle = &#39;#000&#39;;
        this.lineWidth = 1;
        this.drawType = &#39;line&#39;;
        this.paintType = &#39;stroke&#39;;
        this.nums = 6; //正多边形的边数
    }

canvasObj: キャンバスのキャンバスオブジェクトです

cxtObj: コンテキスト描画環境です

w: キャンバスの幅

h: キャンバスの高さ

fillStyle: Fill color

strokingStyle: ストロークの色

lineWidth: 線の幅

drawType: デフォルトは直線を描画することです

paintType: 2 つのオプション (ストローク/塗りつぶし)

2、プロトタイプオブジェクトのパブリックメソッド描画を拡張しますグラフィックスを描画するには

描画メソッドは主に始点座標 (startX、startY) と終点座標 (endX、endY) を取得します

次に、init メソッドを呼び出して、特定のグラフィックスを描画します。次のキーメソッドで:

_this[_this.drawType](startX, startY, endX, endY)

このメソッドのdrawTypeは、次のようにインターフェイスのリアルタイム選択に従って、対応する描画タイプを変更します。

_this['line'](startX, startY, endX, endY)

呼ばれるものはoShapeオブジェクトのline、直線を描くメソッドです

Shape.prototype = {
        init: function () {
            this.oGc.fillStyle = this.fillStyle;
            this.oGc.strokeStyle = this.strokeStyle;
            this.oGc.lineWidth = this.lineWidth;
        },
        draw: function () {
            var _this = this;
            this.oCanvas.onmousedown = function ( ev ) {
                _this.init();
                var oEvent = ev || event,
                    startX = oEvent.clientX - _this.oCanvas.offsetLeft,
                    startY = oEvent.clientY - _this.oCanvas.offsetTop;
                _this.oCanvas.onmousemove = function ( ev ) {
                    _this.oGc.clearRect( 0, 0, _this.oCanvas.width, _this.oCanvas.height );
                    var oEvent = ev || event,
                        endX = oEvent.clientX - _this.oCanvas.offsetLeft,
                        endY = oEvent.clientY - _this.oCanvas.offsetTop;
                    _this[_this.drawType](startX, startY, endX, endY);
                };
                _this.oCanvas.onmouseup = function(){
                    _this.oCanvas.onmousemove = null;
                    _this.oCanvas.onmouseup = null;
                }
            }
        },
        line: function ( x1, y1, x2, y2 ) {
            this.oGc.beginPath();
            this.oGc.moveTo( x1, y1 );
            this.oGc.lineTo( x2, y2 );
            this.oGc.closePath();
            this.oGc.stroke();
        },
        circle : function( x1, y1, x2, y2 ){
            this.oGc.beginPath();
            var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) );
            this.oGc.arc( x1, y1, r, 0, 2 * Math.PI, false );
            this.oGc.closePath();
            this.oGc[this.paintType]();
        },
        rect : function( x1, y1, x2, y2 ){
            this.oGc.beginPath();
            this.oGc.rect( x1, y1, x2 - x1, y2 - y1 );
            this.oGc[this.paintType]();
        },
        polygon : function( x1, y1, x2, y2 ){
            var angle = 360 / this.nums * Math.PI / 180;//边对应的角的弧度
            var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) );
            this.oGc.beginPath();
            for( var i = 0; i < this.nums; i ++ ){
                this.oGc.lineTo( x1 + r * Math.cos( angle * i ), y1 + r * Math.sin( angle * i ) );
            }
            this.oGc.closePath();
            this.oGc[this.paintType]();
        }
    }

3 インターフェースの操作は基本的に非常に簡単です。タブの操作＋html5のカスタム属性＋classListの応用

以上がhtml5を使ってWindowsに似たお絵描きソフトを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTTP错误代码汇总 次の記事：如何处理bootstrap Table 服务端处理分页

関連記事

続きを見る