1

我对代码真的很陌生。我正在尝试制作一个可以在桌面和移动设备上运行的绘画应用程序。我使用 JavaScript 在桌面上运行良好，但为了让它在移动设备上运行，似乎 JQuery mobile 是一种推荐的方法。我正在将它转换为 JQuery 并让 maint 与 .mousedown、.mouseup 等一起使用，但是当我更改为 .vmousedown、.vmouseup 等以使其与 touch 一起使用时，我得到了一个我无法做到的错误似乎解决了。

未捕获的类型错误：对象 [object Object] 没有方法“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