質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

496閲覧

mouseイベントにtouchイベントを追加するには

kihokutarou

総合スコア59

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/04 06:37

編集2018/03/04 06:40

たぶんかなり初歩的な質問です。ただいま勉強中です。
以下のscriptにはmouseイベントがあります。具体的にはmousedown時の座標を取り同じくup時の座標を取り、画像を範囲指定してトリミングする、というコードです。

これをタッチ操作で行うためには、touchイベントを追加すればよいとは思いますが、それは単純に例えば、
display.addEventListener("mousemove", function(e){}, false);

display.addEventListener("mousemove","touchstart", function(e){}, false);
と記載すべきなのか、または
display.addEventListener("mousemove",function(e){}, false);
display.addEventListener("touchstart",function(e){}, false);
でよいのでしょうか。

また同じく
$('#upload_canvas').on("mousemove", function(e) {
if (is_down) {
var mouse_pos = getMousePos(e);
updateSelectArea(mouse_pos);
}
});
も、"touchmove"などを追加すればよいのか、それとも同等の複数行をtouchで書き加えるべきなのか教えてください。

というかそもそも「そんな書き換えじゃ動かないよ」という場合は別途ご教示いただけると幸いです。

javascript

1var layer1 = document.getElementById("layer1"); 2var layer1Ctx = layer1.getContext("2d"); 3 4var layer2 = document.getElementById("layer2"); 5var layer2Ctx = layer2.getContext("2d"); 6 7var display = document.getElementById("upload_canvas"); 8var displayCtx = display.getContext("2d"); 9 10var base = document.getElementById("base"); 11var baseCtx = base.getContext("2d"); 12 13var render = document.getElementById("render"); 14var renderCtx = render.getContext("2d"); 15 16var layers = [layer1, layer2]; 17 18var is_down = false; 19var trimming_begin_pos = { x: null, y: null }; 20var trimming_end_pos = { x: null, y: null }; 21 22var loaded_file = null; 23var max_canvas_size = { width: 900, height: 600 }; 24 25$(function() { 26 // load image file 27 $("#upload_file").change(function() { 28 29 var file = this.files[0]; 30 if (!file.type.match(/^image/(png|jpeg|gif)$/)) return; 31 32 var image = new Image(); 33 var reader = new FileReader(); 34 35 reader.onload = function(e) { 36 image.onload = function() { 37 38 var min_width = Math.min(this.width, max_canvas_size.width); 39 var min_height = Math.min(this.height, max_canvas_size.height); 40 var scale = Math.min(min_width / this.width, min_height / this.height); 41 var size = {width: this.width * scale, height: this.height * scale}; 42 43 resizeCanvas(size.width, size.height); 44 layer1Ctx.drawImage(image, 0, 0, size.width, size.height); 45 updateCanvas(); 46 47 $("#upload_button").attr('filename', file.name); 48 $("#upload_button").show(); 49 50 // load file on base buffer 51 base.width = this.width/3; 52 base.height = this.height/3; 53 baseCtx.drawImage(image, 0, 0,this.width/3,this.height/3); 54 } 55 image.src = e.target.result; 56 } 57 58 reader.readAsDataURL(file); 59 }); 60 61 // upload image 62 $("#upload_button").click(function(){ 63 64 // get blob data from canvas 65 var canvas = $('#render'); 66 var type = 'image/jpeg'; 67 var dataurl = canvas[0].toDataURL(type); 68 var bin = atob(dataurl.split(',')[1]); 69 var buffer = new Uint8Array(bin.length); 70 for (var i = 0; i < bin.length; i++) { 71 buffer[i] = bin.charCodeAt(i); 72 } 73 var blob = new Blob([buffer.buffer], {type: type}); 74 75 // upload 76 var fd = new FormData(); 77 fd.append('filename', $(this).attr('filename')); 78 fd.append('data', blob); 79 $.ajax({ 80 type: 'POST', 81 url: 'http://yoursite', 82 data: fd, 83 processData: false, 84 contentType: false 85 }).done(function(data) { 86 // done 87 }); 88 }); 89 90 // canvas controll 91 function resizeCanvas(width, height) { 92 for(var i = 0; i < layers.length; i++) { 93 layers[i].width = width; 94 layers[i].height = height; 95 } 96 display.width = width; 97 display.height = height; 98 } 99 100 function updateCanvas() { 101 displayCtx.drawImage(layer1, 0, 0, display.width, display.height); 102 displayCtx.drawImage(layer2, 0, 0, display.width, display.height); 103 } 104 105 106 display.addEventListener("mousemove", function(e){}, false); 107 display.addEventListener("mouseout", function(e){}, false); 108 $('#upload_canvas').on("mousemove", function(e) { 109 if (is_down) { 110 var mouse_pos = getMousePos(e); 111 updateSelectArea(mouse_pos); 112 } 113 }); 114 $('#upload_canvas').on("mouseout", function(e) { 115 }); 116 $('#upload_canvas').on("mousedown", function(e) { 117 if (is_down == true) return; 118 is_down = true; 119 trimming_begin_pos = getMousePos(e); 120 }); 121 $('#upload_canvas').on("mouseup", function(e) { 122 is_down = false; 123 trimming_end_pos = getMousePos(e); 124 125 var begin_pos = trimming_begin_pos; 126 var end_pos = trimming_end_pos; 127 128 if (begin_pos.x == end_pos.x && begin_pos.y == end_pos.y) return; 129 var begin = {x: 0, y:0}; 130 var end = {x:0, y:0}; 131 begin.x = Math.min(begin_pos.x, end_pos.x); 132 begin.y = Math.min(begin_pos.y, end_pos.y); 133 end.x = Math.max(begin_pos.x, end_pos.x); 134 end.y = Math.max(begin_pos.y, end_pos.y); 135 136 highlightTrimmingArea(begin, end); 137 clip(begin, end); 138 }); 139 140 function getMousePos(e) { 141 var rect = display.getBoundingClientRect(); 142 return { 143 x: e.clientX - rect.left, 144 y: e.clientY - rect.top}; 145 } 146 147 function updateSelectArea(mouse_pos) { 148 clear(layer2); 149 drawRect(layer2, 150 trimming_begin_pos.x, 151 trimming_begin_pos.y, 152 mouse_pos.x - trimming_begin_pos.x, 153 mouse_pos.y - trimming_begin_pos.y, 154 3, 'red'); 155 updateCanvas(); 156 } 157 158 function highlightTrimmingArea(begin, end) { 159 clear(layer2); 160 var fill = "rgba(0, 0, 0, 0.5)"; 161 fillRect(layer2, 0, 0, layer2.width, begin.y, fill); // top 162 fillRect(layer2, 0, begin.y, begin.x, end.y - begin.y, fill); // left 163 fillRect(layer2, end.x, begin.y, layer2.width - begin.x, end.y - begin.y, fill); // right 164 fillRect(layer2, 0, end.y, layer2.width, layer2.height - end.y, fill); // bottom 165 updateCanvas(); 166 } 167 168 function clear(canvas) { 169 var ctx = canvas.getContext("2d"); 170 ctx.clearRect(0, 0, canvas.width, canvas.height); 171 } 172 173 function drawRect(canvas, x, y, width, height, line, style) { 174 var ctx = canvas.getContext("2d"); 175 ctx.beginPath(); 176 ctx.rect(x, y, width, height); 177 ctx.lineWidth = line; 178 ctx.strokeStyle = style; 179 ctx.stroke(); 180 } 181 182 function fillRect(canvas, x, y, width, height, style) { 183 var ctx = canvas.getContext("2d"); 184 ctx.beginPath(); 185 ctx.rect(x, y, width, height); 186 ctx.fillStyle = style; 187 ctx.fill(); 188 } 189 190 function clip(begin, end) { 191 var scale = base.width / display.width; // display scale 192 var x = begin.x * scale; 193 var y = begin.y * scale; 194 var width = (end.x - begin.x) * scale; 195 var height = (end.y - begin.y) * scale; 196 197 render.width = width; 198 render.height = height; 199 renderCtx.drawImage( base, x, y, width, height, 0, 0, width, height); 200 } 201 202}); 203

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

とりあえずイベント処理を jQuery か addEventListener のどちらかに統一されたほうが良いと思います。

質問内容については記事&リファレンスを読んでみて下さい。

【JavaScript - addEventListenerで複数のイベントをbindしたい(74128)|teratail】
https://teratail.com/questions/74128

【EventTarget.addEventListener - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

【【jQuery】onメソッドの使用方法 - Qiita】
https://qiita.com/katsunory/items/7b50d399329767a893e1#eventsで複数のイベントを設定

【.on() | jQuery API Documentation】
http://api.jquery.com/on/

投稿2018/03/04 14:42

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問