1

私はコードを書くのが本当に初めてです。デスクトップとモバイルで動作するペイント アプリを作成しようとしています。JavaScriptを使用してデスクトップで問題なく動作しましたが、モバイルで動作させるには、JQueryモバイルが推奨される方法のようでした。私はそれをJQueryに変換していて、.mousedown、.mouseupなどで動作するメインを持っていましたが、.vmousedown、.vmouseupなどに変更してタッチで動作させると、エラーが発生します.解決するようです。

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にはメソッド 'vmousedown' がありません

同様の問題を抱えている他の人を見たことがありますが、うまく機能させるのに苦労しています。

JSFiddle - http://jsfiddle.net/mquickel/dehAD/79/

HTML スニペット

<html>
<head>
    <link rel="stylesheet" type="text/css" href="colorCSS2.css">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body data-role="page">
<div id="container">
    <div id="sketch" data-role="content">
        <canvas id="paint" style="z-index: 0; position:absolute;" height="600px" width="600px"></canvas> 
        <canvas id="layer2" style="z-index: 1; position:absolute;" height="600px" width="600px"></canvas> 
    </div>

JS スニペット

    document.getElementById( "container" ).onmousedown = function(event){
    event.preventDefault();
    }

    var layer2 = document.getElementById("layer2");
    var ctx2 = layer2.getContext("2d");
    var imageObj = new Image();
    /* Loading the Image*/
    imageObj.onload = function() {
        ctx2.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'https://lh5.googleusercontent.com/-P5ucC3TjCLU/UjHE0rENTaI/AAAAAAAAAts/mH2A_OORkQY/s800/color.png';


(function() {
    var canvas = document.getElementById('paint');
    var ctx = canvas.getContext('2d');
    var imageObj = new Image();

    var cont = document.getElementById('container');
    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};

    /* Mouse Capturing Work */

    $(cont).mousemove (function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

     mouse.x = e.pageX - this.offsetLeft;
     mouse.y = e.pageY - this.offsetTop;
    });


    /* Drawing on Paint App */
    ctx.lineWidth = 20;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = brushColor; 


    $(cont).vmousedown(function(e) {
    console.log("hi");
    $(cont).vmousemove (onPaint);
    });


     $(cont).vmouseup (function() {
     console.log("up");
     $(cont).unbind ('vmousemove', onPaint);
     });

    var onPaint = function() {
        ctx.beginPath();
        ctx.moveTo(last_mouse.x, last_mouse.y);
        ctx.lineTo(mouse.x, mouse.y);
        ctx.closePath();
        ctx.stroke();
    };

}());
4

0 に答える 0