index.html
<!DOCTYPE html>
<html>
<head>
<style>
.display_none {
display: none;
}
</style>
</head>
<body>
<div id="canvas_div">
<canvas id="myCanvas"></canvas>
</div>
<div class="display_none">
X座標移動中：<input type="text" id="moveX" />
Y座標移動中：<input type="text" id="moveY" />
<br>
X座標ここから：<input type="text" id="fromX" />
Y座標ここから：<input type="text" id="fromY" />
<br>
X座標ここまで：<input type="text" id="toX" />
Y座標ここまで：<input type="text" id="toY" />
<br>
clientWidth：<input type="text" id="clientWidthTb" />
clientHeight：<input type="text" id="clientHeightTb" />
</div>
<script>
/************************************
elem
************************************/
function elem(id){
return document.getElementById(id);
}
/************************************
グローバル変数
************************************/
var canvas_div = elem("canvas_div");
var fromX = elem("fromX");
var fromY = elem("fromY");
var moveX = elem("moveX");
var moveY = elem("moveY");
var toX = elem("toX");
var toY = elem("toY");
var endFlag = false;
/************************************
イベント
************************************/
document.onmousedown = on_mousedown;
document.onmouseup = on_mouseup;
document.onmousemove = on_mousemove;
getClientSize();
function getClientSize() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
elem('clientWidthTb').value = width;
elem('clientHeightTb').value = height;
elem("myCanvas").width = width;
elem("myCanvas").height = height;
}
/************************************
on_mousemove
************************************/
function on_mousemove(e){
if(endFlag === false) {
//座標を取得する
var X = e.pageX; //X座標
var Y = e.pageY; //Y座標
//座標を表示する
moveX.value = X;
moveY.value = Y;
toX.value = X;
toY.value = Y;
get_trimed();
}
}
/************************************
on_mousedown
************************************/
function on_mousedown(e){
clearRect();
endFlag = false;
//座標を取得する
var X = e.pageX; //X座標
var Y = e.pageY; //Y座標
//座標を表示する
fromX.value = X;
fromY.value = Y;
}
/************************************
on_mouseup
************************************/
function on_mouseup(e){
//座標を取得する
var X = e.pageX; //X座標
var Y = e.pageY; //Y座標
//座標を表示する
toX.value = X;
toY.value = Y;
get_trimed();
endFlag = true;
}
/************************************
get_trimed
************************************/
function get_trimed(flag){
clearRect();
var X1 = parseInt(fromX.value);
var Y1 = parseInt(fromY.value);
var X2 = parseInt(toX.value);
var Y2 = parseInt(toY.value);
//逆向きからの選択に対応
var X = nomalize_position(X1, X2);
X1 = X[0];
X2 = X[1];
//逆向きからの選択に対応
var Y = nomalize_position(Y1, Y2);
Y1 = Y[0];
Y2 = Y[1];
//範囲を取得する
var X3 = Math.abs(X2 - X1);
var Y3 = Math.abs(Y2 - Y1);
createRect(X1, Y1, X3, Y3);
}
/************************************
nomalize_position
上から下、左から右に選択すれば問題ないが
下から上や右から左に選択すると
起点よりも終点の方が小さくなり
範囲が正しく取得できないので
起点が終点よりも大きい場合は両者を入れ替えて
逆向きからの選択に対応する
************************************/
function nomalize_position(A, B){
if(A > B){
var A0 = A;
A = B;
B = A0;
}
var result = [A, B];
return result;
}
/************************************
create_canvas
************************************/
function create_canvas(){
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "image_canvas");
canvas_div.appendChild(canvas);
return canvas;
}
/************************************
remove_child
************************************/
function remove_child(id) {
var elem = document.getElementById(id);
for (var i = elem.childNodes.length - 1; i >= 0; i--) {
elem.removeChild(elem.childNodes[i]);
}
}
function createRect(x, y, width, height) {
var canvas = elem("myCanvas");
var context = canvas.getContext("2d");
context.strokeStyle = "blue";
context.lineWidth = 1;
context.strokeRect(x, y, width, height);
}
function clearRect() {
var canvas = elem("myCanvas");
var context = canvas.getContext("2d");
var width = elem('clientWidthTb').value;
var height = elem('clientHeightTb').value;
context.clearRect(0, 0, width, height);
}
function elem(id) {
return document.getElementById(id);
}
</script>
</body>
</html>
|
