首页 文章

在Windows Mobile 6.1 Treo 800w上使用Opera 9.5 Mobile中的Canvas Tag

提问于
浏览
0

是否可以使用标签使用手写笔捕获电子签名?我有一个适用于桌面Opera的示例,但它在Windows移动版Opera上失败 .

当我点击画布区域Opera时,只需“缩放”屏幕即可 .

这是我的html Canvas Paint - 例5

绘图工具:铅笔

<div id="container"> 
  <canvas id="imageView" width="400" height="300" tabindex="1">
    <p>Unfortunately, your browser is currently unsupported by our web 
    application.  We are sorry for the inconvenience. Please use one of the 
    supported browsers listed below, or draw the image you want using an 
    offline tool.</p> 
    <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
      href="http://www.mozilla.com">Firefox</a>, <a 
      href="http://www.apple.com/safari">Safari</a>, and <a 
      href="http://www.konqueror.org">Konqueror</a>.</p> 
  </canvas> 
</div>

//

这是我的javascript:

//将所有内容保存在匿名函数中,在窗口加载时调用 . if(window.addEventListener){window.addEventListener('load',function(){var canvas,context,canvaso,contexto;

//活动工具实例var工具; var tool_default ='pencil';

function init(){//查找canvas元素 . canvaso = document.getElementById('imageView'); if(!canvaso){alert('错误:我找不到画布元素!');返回; }

if (!canvaso.getContext) {
  alert('Error: no canvas.getContext!');
  return;
}

// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
  alert('Error: failed to getContext!');
  return;
}

// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
  alert('Error: I cannot create a new canvas element!');
  return;
}

canvas.id     = 'imageTemp';
canvas.width  = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);

context = canvas.getContext('2d');

// Get the tool select input.
var tool_select = document.getElementById('dtool');
if (!tool_select) {
  alert('Error: failed to get the dtool element!');
  return;
}
tool_select.addEventListener('change', ev_tool_change, false);

// Activate the default tool.
if (tools[tool_default]) {
  tool = new tools[tool_default]();
  tool_select.value = tool_default;
}

// Attach the mousedown, mousemove and mouseup event listeners.

canvas.addEventListener('click',ev_canvas,false); canvas.addEventListener('mousedown',ev_canvas,false); canvas.addEventListener('mousemove',ev_canvas,false); canvas.addEventListener('mouseup',ev_canvas,false); }

//通用事件处理程序 . 此函数仅确定相对于canvas元素的鼠标//位置 . function ev_canvas(ev){if(ev.layerX || ev.layerX == 0){// Firefox ev._x = ev.layerX; ev._y = ev.layerY; } else if(ev.offsetX || ev.offsetX == 0){// Opera ev._x = ev.offsetX; ev._y = ev.offsetY; }

// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
  func(ev);
}

}

//对工具选择器所做的任何更改的事件处理程序 . function ev_tool_change(ev){if(tools [this.value]){tool = new toolsthis.value; }}

//此函数在#imageView上绘制#imageTemp画布,然后清除#imageTemp . 每次用户//完成绘图操作时都会调用此函数 . function img_update(){contexto.drawImage(canvas,0,0); context.clearRect(0,0,canvas.width,canvas.height); }

//此对象包含每个绘图工具的实现 . var tools = {};

//绘图铅笔tools.pencil = function(){var tool = this; // this.started = false; this.started = true;

//Mike Butcher added  
   this.click = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
    alert(ev._x);
};


// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
};

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
this.mousemove = function (ev) {
  if (tool.started) {
    context.lineTo(ev._x, ev._y);
    context.stroke();
  }
};

// This is called when you release the mouse button.
this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};

};

在里面();

},false); }

如果您有任何意见,请提供帮助 . 我试过过去几周我能想到的事情 .

1 回答

  • 0

    听起来你需要使用event.preventDefault方法来防止默认的缩放行为 .

相关问题