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

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

ただいまの
回答率

87.95%

座標を配列に納めたい

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,129

前提・実現したいこと

touchMoveEventの座標を配列に納めたいのですがやり方が分からず苦戦しています。
どうすればいいのでしょうか。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<style>
.draggable-elem{
width:30px;
height:30px;
border-radius:50%;
background-color:blue;
}
.draggable-elem2{
width:30px;
height:30px;
border-radius:50%;
background-color:red;
}
</style>
<body onLoad="init()">
<div id="canvas-container">
<canvas id="canvas" style="background-color:green;"width="100%" height="100%"></canvas>
<div class="draggable-elem">
<div class="draggable-elem">
<div class="draggable-elem">
<div class="draggable-elem"></div>
<script>
//画面サイズ
var theCanvas = document.getElementById('canvas');
function canvas_resize(){
var windowInnerWidth=window.innerWidth;
var windowInnerHeight=window.innerHeight/1.2;
theCanvas.setAttribute('width',windowInnerWidth);
theCanvas.setAttribute('height',windowInnerHeight);
}
window.addEventListener('resize',canvas_resize,false);
canvas_resize();

//サッカーコート
var container = document.getElementById("canvas-container");
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

//親要素のサイズをCanvasに指定
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;

function init() {
// オブジェクトを描画
drawRect();
}

function drawRect() {
//色を指定する
context.strokeStyle = 'rgb(255,255,255)'; //枠線の色は白
context.fillStyle = 'rgb(00,00,255)';

context.strokeRect(canvas.width/2.5, canvas.height/13.5,canvas.width/4.5, canvas.height/18.5);
context.strokeRect(canvas.width/3.65, canvas.height/13.4,canvas.width/2.1, canvas.height/9);
context.strokeRect(canvas.width/2.155, canvas.height/16.5,canvas.width/11, canvas.height/70);
context.strokeRect(canvas.width/11, canvas.height/2.142,canvas.width/1.17, 0);
context.strokeRect(canvas.width/11, canvas.height/13.5,canvas.width/1.17, canvas.height/1.241);
context.strokeRect(canvas.width/3.65, canvas.height/1.3,canvas.width/2.1, canvas.height/9);
context.strokeRect(canvas.width/2.5, canvas.height/1.195,canvas.width/4.5, canvas.height/23);
context.strokeRect(canvas.width/2.155, canvas.height/1.135,canvas.width/11, canvas.height/70);
//円弧
context.beginPath();
context.arc(canvas.width/1.94, canvas.height/5.4,canvas.width/10,Math.PI*1,Math.PI*2,true);
context.stroke();
context.closePath();

context.beginPath();
context.arc(canvas.width/1.94, canvas.height/1.3,canvas.width/10,Math.PI*1,Math.PI*2,false);
context.stroke();
context.closePath();
//円
context.beginPath();
context.arc(canvas.width/1.95, canvas.height/2.13,canvas.width/7,0,Math.PI*2,true);
context.stroke();
context.closePath();
}

//タッチ
function touchStartEvent(event) {
// タッチによる画面スクロールを止める
event.preventDefault();
}

function touchMoveEvent(event) {
event.preventDefault();

// ドラッグ中のアイテムをカーソルの位置に追従
var draggedElem = event.target;
var touch = event.changedTouches[0];
event.target.style.position = "fixed";
event.target.style.top = (touch.pageY - window.pageYOffset - draggedElem.offsetHeight / 2) + "px";
event.target.style.left = (touch.pageX - window.pageXOffset - draggedElem.offsetWidth / 2) + "px";
}
// ドラッグ可能アイテムへのタッチイベントの設定
var draggableItems = $(".draggable-elem");
for (var i = 0; i < draggableItems.length; ++i) {
var item = draggableItems[i];
item.addEventListener('touchstart', touchStartEvent, false);
item.addEventListener('touchmove', touchMoveEvent, false);
item.addEventListener('touchend', touchEndEvent, false);
}
// ドラッグ可能アイテムへのタッチイベントの設定
var draggableItems = $(".draggable-elem2");
for (var i = 0; i < draggableItems.length; ++i) {
var item = draggableItems[i];
item.addEventListener('touchstart', touchStartEvent, false);
item.addEventListener('touchmove', touchMoveEvent, false);
item.addEventListener('touchend', touchEndEvent, false);
}
</script>
</body>
</html>

試したこと

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

こういうことでしょうか?
ただ少し動かしただけでも位置情報を配列に格納するので、配列の長さは結構長くなります。

var positionAry = [];  /* グローバル変数として宣言 */


function touchMoveEvent(event) {
  ...

  /* ここから */
  var positionMap = {};
  positionMap.x = event.target.offsetLeft;  // 左から何pxか
  positionMap.y = event.target.offsetTop;   // 上から何pxか

  positionAry.push(positionMap);

  ...
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/14 15:01

    ありがとうございます。
    参考にします。

    キャンセル

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

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る