Javascript お絵かきアプリ、選択状態解除

2020-02-222020
14.4% (52.8/366)
February
75.2% (21.8/29)
Week 08
82.9% (5.8/7)
Day 22 Sat
80.8% (19.4/24)

訪問者

total: 3574
today: 1
yesterday: 0
now: 9

↑

更新

MenuBar

某所で使うかも知れないお絵かきアプリ

[source] [reload]

パレットから色を選んで、描画エリアをクリックすると色がつく。たくさんの div に jQuery で onClick イベントハンドラを割り付ける
- 本番では jQuery.fn (plugin) 化する。div も plugin 内で作成する
- 本番では再描画時にイベントハンドラをデタッチする必要あり
  - $.remove() / $.empty() は DOM オブジェクトのほかに、キャッシュとイベントハンドラを削除してくれる。(jQuery日本語リファレンス)
一点に色をつけてから、離れた場所を Shift + Click で直線を描画
- このとき、ブラウザの機能によって近辺の div が選択状態になるので、それを解除する必要あり
```
var selection = window.getSelection();
selection.collapse (selection.anchorNode, selection.anchorOffset);
```
  IE8以前では動かないけど、もういいよね

dotpicture.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dot Picture</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.-dot-red {
	background-color: #FFB4E6;
}
.-dot-yellow {
	background-color: yellow;
}
.-dot-blue {
	background-color: greenyellow;
}
.-dot-white {
	background-color: white;
}
.-dot {
    display: inline-block;
	border: solid 1px;
	border-color: lightgray;
    width: 15px;
    height: 15px;
    margin:-3px;
}
.-dot-line {
    height: 15px;
}

/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var pickup = null;
var lastR = null;
var lastC = null;

$(document).ready(function(){
    $('.-dot').each(function(idx){
        var $this = $(this);
        
        if ('pallet' == $this.data('type')) {
            $this.on('click', function(){
                pickup = $this.attr('class');
            });
        } else {
            $this.on('click', function(event){
                if (pickup) {
                    var thisR = $this.data('r');
                    var thisC = $this.data('c');
                    
                    if (event.shiftKey && lastR && lastC){
                    
                        var fromC = lastC < thisC ? lastC : thisC;
                        var fromR = lastC < thisC ? lastR : thisR;
                        var toC = lastC < thisC ? thisC : lastC;
                        var toR = lastC < thisC ? thisR : lastR;
                        
                        for(c = fromC; c <= toC; c++) {
                            r = Math.floor(fromR + (toR - fromR) * (c - fromC) / (toC - fromC));
                            $('div[data-r=\"' + r + '\"][data-c=\"' + c + '\"]').attr('class', pickup);
                        } 
                    } else {
                        lastR = thisR;
                        lastC = thisC;
                        $this.attr('class', pickup);                    
                    }                    
                }
	        var selection = window.getSelection();
	        selection.collapse (selection.anchorNode, selection.anchorOffset);                   
            });
        }
        
    });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
Pallet : 
<div class="-dot-red -dot" data-type="pallet"></div>
<div class="-dot-yellow -dot" data-type="pallet"></div>
<div class="-dot-blue -dot" data-type="pallet"></div>
<div class="-dot-white -dot" data-type="pallet"></div>

<p>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="1" data-c="8"></div>
</div>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="2" data-c="8"></div>
</div>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="3" data-c="8"></div>
</div>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="4" data-c="8"></div>
</div>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="5" data-c="8"></div>
</div>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="6" data-c="8"></div>
</div>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="7" data-c="8"></div>
</div>
<div class="-dot-line">
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="1"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="2"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="3"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="4"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="5"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="6"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="7"></div>
    <div class="-dot-white -dot" data-type="matrix" data-r="8" data-c="8"></div>
</div>
</p>

</body>
</html>

パレットのスペルが違うけどまぁいいや (画材:palette、荷台:pallet)

HTML

Javascript お絵かきアプリ、選択状態解除

目次

訪問者

更新

最新の10件

人気の10件

MenuBar