HTML5画图板PhoneGap移植

MJ.Zhou

发布于 2022-05-07 16:31:19

9080

发布于 2022-05-07 16:31:19

文章被收录于专栏：.NET开发那点事

这次来看一下怎么把上次的HTML5画图板使用PhoneGap移植到Andriod上去。经过上一篇的PhoneGap环境的搭建，很轻松的就把一个HTML5的web应用移植到了Andriod上去，可以看出PhoneGap的强大。

1.添加自定义的JavaScript文件index.js

在www文件夹下添加js文件夹，在js文件夹下添加index.js

这里我重构了上一次的画板的JavaScript文件，不过代码的关键点是全部一样的。我只不过是按照面向对象的方式重构了一下代码。正好学习JavaScript怎么实现一个类，怎么调用方法等，挺有意思的。

function App()
{
    var _this=this;
    _this.initialize=function()
    {
        //注册设备初始化完成事件
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    var onDeviceReady=function()
    {
        var can = new Can();
        can.bindEvents();//绑定事件
    }
}

function Can ()
{

var _this=this;
var lastX;//最后一次触摸的x坐标
var lastY;//最后一次触摸的y坐标
var canvas = document.getElementById("canvas");
var context =canvas.getContext("2d");

var init=function()
{
    lastX=0;
    lastY=0;
    
    //全屏canvas
    canvas.width=window.screen.width;
    canvas.height=window.screen.height;

    context.lineWidth=10;//画笔粗细
    context.strokeStyle="#FF0000";//画笔颜色
};

//绑定事件
_this.bindEvents = function() 
{
        try
        {
            //注册监听
            canvas.addEventListener('touchstart', onTouchStart, false);
            canvas.addEventListener('touchmove', onTouchMove, false);
         }
        catch(err)
        {
            alert(err.message);
        }
};

//触摸开始
var onTouchStart=function()
{      
    try
    {
       event.preventDefault();

        lastX=event.touches[0].clientX;
        lastY=event.touches[0].clientY;
        //画点
        drawRound(lastX,lastY);
    }
    catch(err)
    {
        alert(err.message);
    }

};

//触摸移动
var onTouchMove=function()
{
        try
        {
          event.preventDefault();
        //画线
          drawLine(lastX,lastY,event.touches[0].clientX,event.touches[0].clientY);
          lastX=event.touches[0].clientX;
          lastY=event.touches[0].clientY;
        
        }
        catch(err)
        {
            alert( err.message);
        }
};

//画圆
var drawRound = function (x,y)
{
    try
    {
        context.fillStyle="#FF0000";
        context.beginPath();
        context.arc(x,y,5,0,Math.PI*2,true);
        context.closePath();
        context.fill();
    }
    catch(err)
    {
        alert(err.message);
    }
   
};
//画线
var drawLine = function (startX,startY,endX,endY)
{
    try
    {

        context.beginPath();
        context.lineCap="round";
        context.moveTo(startX,startY);
        context.lineTo(endX,endY);
        context.stroke();
    }
    catch(err)
    {
        alert(err.message);
    }
   
};

init();

} ;

2.修改index.html

这个html代码跟上次的web应用完全一样。只添加了对App类的初始化代码。

<!doctype html>
<html>
<head>
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <title>HTML5Paint</title>
    <script src="http://debug.phonegap.com/target/target-script-min.js#6CFB7EA06AB04AFBB33FD97AE40691C5"></script>
    <script type="text/javascript" src="cordova-2.6.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/index.js" charset="utf-8"></script>
    <script type="text/javascript">
        try
        {
            var app=new App();
             app.initialize();//初始化
        }
        catch(err)
        {
            alert(err.message);
        }
        
    </script>
</head>
<body>
    <canvas id="canvas" ></canvas>

</body>
</html>

3.在Andriod上的效果