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

Posted 2023-03-24

【中文标题】在 Windows Mobile 6.1 Treo 800w 上的 Opera 9.5 Mobile 中使用 Canvas 标签

【英文标题】：Using Canvas Tag in Opera 9.5 Mobile on Windows Mobile 6.1 Treo 800w

【发布时间】：2011-04-14 07:55:23

【问题描述】：

是否可以使用标签通过手写笔捕获电子签名？ 我有一个适用于 Desktop Opera 的示例，但它在 windows mobile 版本的 Opera 上失败。

当我点击画布区域时，Opera 会简单地“缩放”屏幕。

这是我的html 帆布涂料 - 示例 5

绘图工具： 铅笔

<div id="container"> 
  <canvas id="imageView"   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：

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

// 活动工具实例。 变量工具； var tool_default = '铅笔';

函数初始化（） // 找到画布元素。 canvaso = document.getElementById('imageView'); 如果（！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);

// 通用事件处理程序。这个函数只是确定鼠标 // 相对于画布元素的位置。 函数 ev_canvas (ev) if (ev.layerX || ev.layerX == 0) // 火狐 ev._x = ev.layerX; ev._y = ev.layerY; else if (ev.offsetX || ev.offsetX == 0) // 歌剧 ev._x = ev.offsetX; ev._y = ev.offsetY;

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

// 对工具选择器所做的任何更改的事件处理程序。 函数 ev_tool_change (ev) 如果（工具[this.value]） 工具=新工具this.value；

// 这个函数在#imageView之上绘制#imageTemp画布，之后 // #imageTemp 被清除。每次用户调用该函数 // 完成一个绘图操作。 功能 img_update () contexto.drawImage(canvas, 0, 0); context.clearRect(0, 0, canvas.width, canvas.height);

// 这个对象保存了每个绘图工具的实现。 变量工具 = ;

// 绘图铅笔。 工具.铅笔=函数（） 变种工具=这个； // 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();
  
;

;

init();

，假）；

如果您有任何意见，请提供帮助。在过去的几周里，我尝试了所有我能想到的方法。

【参考方案1】：

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