HTML5 canvas를 사용한 직사각형 선택 및 선택 범위 채우기

개요

그림 그리기 앱으로 자주 있는 구형 선택→선택 범위 채우기를 canvas와 javascript를 사용해 재현해 보았다.

비망록으로서 실어 둔다.

업무로 사용할지도.

동작

출처

app.js

var app = (function (){
    //キャンバスエレメント
    var _displayLayer;
    var _drowingLayer;
    //描画コンテキスト
    var _ctxDisplayLayer;
    var _ctxDrowingLayer;

    // キャンバスサイズ
    var _canvasY;
    var _canvasX;

    // コンストラクタ
    var app = function (_display, _drowing) {
        _displayLayer    = _display;
        _drowingLayer    = _drowing;
        _canvasY         = _drowingLayer.clientHeight;
        _canvasX         = _drowingLayer.clientWidth;
        _ctxDisplayLayer = _display.getContext("2d");
        _ctxDrowingLayer = _drowing.getContext("2d");
        _drowingLayer.addEventListener("mousedown", onMouseDown, false);
        _drowingLayer.addEventListener("mouseup"  , onMouseUp  , false);
    };

    // 矩形オブジェクト
    var _rectangle = {
        startY:0,
        startX:0,
        endY:0,
        endX:0,
        clear:function () {
            this.startY = 0;
            this.startX = 0;
            this.endY   = 0;
            this.endX   = 0;
        }
    };
    function onMouseDown (e) {
        _rectangle.startY = e.clientY;
        _rectangle.startX = e.clientX;
        _drowingLayer.addEventListener ("mousemove", onMouseMove, false);
    };

    function onMouseMove (e) {
        _ctxDrowingLayer.clearRect(0, 0, _canvasX, _canvasY);
        _rectangle.endY = e.layerY - _rectangle.startY;
        _rectangle.endX = e.layerX - _rectangle.startX;
        _ctxDrowingLayer.strokeRect (_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
    };

    function onMouseUp (e) {
        _ctxDisplayLayer.fillRect(_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
        _rectangle.clear();
        _ctxDrowingLayer.clearRect(0, 0, _canvasX, _canvasY);
        _drowingLayer.removeEventListener ("mousemove", onMouseMove, false);
    };

    return app;
})();

ImageEditTest.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>canvasを用いた画像編集アプリ</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div class="main">
        <canvas id="display" class="display" width="1280" height="720"></canvas>
        <canvas id="drowing" class="drowing" width="1280" height="720"></canvas>
    </div>
    <script type="text/javascript">
        var display  = document.getElementById("display");
        var drowing  = document.getElementById("drowing");
        var instance = new app(display, drowing);
    </script>
</body>
</html>

main.css

.display{
    border: solid 1px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.drowing{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

Reference

이 문제에 관하여(HTML5 canvas를 사용한 직사각형 선택 및 선택 범위 채우기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okanikani/items/d76e3f450d0ce3e84f9b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다