无法理解此 JavaScript 代码来绘制 HTML 画布？ [关闭]

Posted 2023-03-05

【中文标题】无法理解此 JavaScript 代码来绘制 HTML 画布？ [关闭]

【英文标题】：Can't understand this javascript code to paint HTML canvas? [closed]

【发布时间】：2014-07-31 12:11:57

【问题描述】：

如果有人能告诉我这段代码是如何工作的，我将不胜感激 - 我觉得我的头撞到了墙上：

如何初始化铅笔对象？铅笔不是一个函数吗？怎么能像类一样初始化？ 在铅笔功能中，“this”指的是什么？ 在铅笔功能中，为什么我需要一个单独的“工具”变量？我尝试删除它并用“this”替换它，但发生的事情是画布不再听mouseup - 你点击画布，即使你的鼠标上升，它也会继续绘制。 ev._x 和 ev._y 是从哪里来的？这部分是画布对象吗？有没有我可以参考的文档？ ev_canvas 函数中的“layerX”和“offsetX”究竟是什么？ 你能帮我理解最后几行吗？我不知道它们是什么意思，也没有见过这样写的 JS。

谢谢！

var func = tool[ev.type];
if (func) 
    func(ev);

谢谢！

// Initialize variables
var canvas = document.getElementById('imageView');
var context = canvas.getContext('2d');
var tool = new pencil();

function init () 
  // Add listeners
  canvas.addEventListener('mousedown', ev_canvas);
  canvas.addEventListener('mousemove', ev_canvas);
  canvas.addEventListener('mouseup',   ev_canvas);


// Pencil tool
function pencil () 
  var tool = this;
  this.started = false;

  // Mousedown
  this.mousedown = function (ev) 
      context.beginPath();
      context.moveTo(ev._x, ev._y);
      tool.started = true;
  ;

  // Mousemove
  this.mousemove = function (ev) 
    if (tool.started) 
      context.lineTo(ev._x, ev._y);
      context.stroke();
    
  ;

  // Mouseup
  this.mouseup = function (ev) 
    if (tool.started) 
      tool.mousemove(ev);
      tool.started = false;
    
  ;


// Determines mouse position relative to canvas
function ev_canvas (ev) 
  // if (ev.layerX || ev.layerY == 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);
  


init();

【问题讨论】：

你真的需要一次只专注于一件事。您在这里有 6 个不同的问题，您应该这样对待它们。大部分内容归结为“学习 javascript OO 的基础知识”和“阅读您尝试使用的 API 的文档”。

这太宽泛了。 Stack Overflow 用于提出可以用合理数量的单词回答的问题。

【参考方案1】：

铅笔是一个类。在 JavaScript 中，类构造函数采用 function MyClass()

的形式

this 用于从构造函数或成员函数中指向类本身。因此，this.mouseup() 可以从一个实例（在您的情况下）作为tool.mouseup() 访问

因为这是您的班级用来跟踪运动的变量。如果你想替换tool，你也必须替换tool.started assignments and evaluations

ev._x 和 ev._y 只是指向 ev.offsetX 和 ev.offsetY 的变量，它们是事件对象的标准属性

不知道layerX应该是什么

1234563 tool)。

【讨论】：

非常有帮助，谢谢:)

没问题。不过，正如其他人所说，我建议您熟悉基本概念并从那里逐步建立。当你没有扎实的基础时，很难理解事情——相信我，我是从 jQuery 开始的，对 JavaScript 一无所知，我花了 2 年的时间才明白为什么有些事情会以它们的方式工作，因为我总是困惑。

接下来我将研究 JS OOP，并从那里开始构建...有时，Web 开发会诱使您在没有真正了解全局的情况下开始构建东西，因为它是轻量级的...我猜我必须从基础开始！再次感谢您帮助一个菜鸟:)