2021SC@SDUSC
Descripción general
La última vez que analizamos y resumimos la última parte de canvasPainter.js en canvas, para el motor de renderizado de Quark Renderer, es un elemento. Hay muchos atributos en estos elementos, y cada elemento tiene atributos visuales como su posición actual, estado de zoom, color, sombra, degradado, etc. Hemos realizado un análisis en profundidad de los archivos js en el lienzo en los últimos estudios y también hemos estudiado algunos otros archivos llamados en el lienzo. Así que esta vez, analicemos y estudiemos la siguiente parte.
La parte de nuestro estudio esta vez es el procesamiento del sistema de eventos. El sistema de eventos también es bastante interesante, porque Canvas es una interfaz API de muy bajo y muy bajo nivel. No proporciona una encapsulación de alto nivel, lo que significa que tiene ir a Es muy problemático cuando se realizan algunos eventos, y debe implementarlo usted mismo. A través de la vista general y el análisis del contenido del código en el paquete de eventos, se puede saber que el sistema de eventos de Quark Renderer maneja los eventos simulando el diseño de eventos DOM.
Análisis de la parte de procesamiento de eventos.
Control general sobre Eventful.js
La parte más esencial del sistema de eventos está en el paquete Eventful.js. Todo lo relacionado con los eventos está en este paquete, que es responsable de cierto control global del sistema de eventos. Las funciones en este paquete también brindan soporte de eventos para clases que no admiten mecanismos de eventos. El mecanismo básico es similar a los eventos DOM de W3C. Las clases que requieren mecanismos de eventos pueden combinar las funciones de herramientas en esta clase.
Analizar métodos específicos
Constructor
El primero es el constructor, que requiere parámetros, cada uno de los cuales es un objeto, como el controlador de eventos, es decir, el alcance del controlador de eventos actual cuando se ejecuta la función; también hay una función que necesita que el método devuelva verdadero antes de que se ejecute; también hay un método, el método se ejecutará después de que se llame al controlador de eventos; el último parámetro también es una función, que se llama al agregar o eliminar detectores de eventos.
let Eventful = function (eventProcessor) {
this._$handlers = {
};
this._$eventProcessor = eventProcessor;
this._$suspends = new Set();
};
La función del controlador solo se llamará una vez y se eliminará después de su uso. Esta función tiene cuatro parámetros, a saber, evento (nombre del evento), consulta (condición de filtro de eventos), controlador (función de procesamiento de eventos), contexto (contexto de ejecución de la función de procesamiento de eventos) y el valor devuelto en esta función llama a la función on. A continuación analizamos la función on.
one: function (event, query, handler, context) {
return on(this, event, query, handler, context, true);
},
La función de este método es vincular la función de procesamiento de eventos y pasar cuatro parámetros, que son el nombre del evento, la condición de filtro condicional, la función de procesamiento de eventos y el contexto en el que se ejecuta la función de procesamiento de eventos. La función de encendido al regresar.
on: function (event, query, handler, context) {
return on(this, event, query, handler, context, false);
},
en función
En la función on, vemos que el valor que pasó es uno más que uno, que es un valor booleano, que indica si solo se ejecuta una vez, le pasamos verdadero y los demás parámetros son iguales. En el siguiente código de función, podemos ver que hay tres juicios, que analizan y juzgan los parámetros entrantes respectivamente. El primero es para juzgar si la consulta es una función, y el segundo parámetro es para juzgar si el controlador y el evento son No. nulo, el tercer juicio es juzgar _h[evento], si no existe, establecer el valor en una matriz.
let _h = eventful._$handlers;
if (typeof query === 'function') {
context = handler;
handler = query;
query = null;
}
if (!handler || !event) {
return eventful;
}
if (!_h[event]) {
_h[event] = [];
}
En la parte restante, atraviese _h[evento], juzgue si su ctx y h corresponden al contexto y al controlador, y regrese lleno de eventos.
Luego defina un objeto de envoltura y establezca los valores como los parámetros obtenidos en este método. Luego obtenga su lastIndex y lastWrap, y llame a la función callListenerChanged, que principalmente asigna eventType a ventful._$eventProcessor.afterListenerChanged
for (let i = 0; i < _h[event].length; i++) {
if (_h[event][i].ctx === context && _h[event][i].h === handler) {
return eventful;
}
}
let wrap = {
h: handler,
one: isOnce,
query: query,
ctx: context || eventful,
callAtLast: handler.qrEventfulCallAtLast,
};
let lastIndex = _h[event].length - 1;
let lastWrap = _h[event][lastIndex];
lastWrap && lastWrap.callAtLast ? _h[event].splice(lastIndex, 0, wrap) : _h[event].push(wrap);
callListenerChanged(eventful, event);
return eventful;
función de apagado
Si hay una función de encendido, habrá un método de apagado correspondiente. La función de este método es liberar la función de procesamiento de eventos. Hay tres parámetros que deben pasarse, a saber, el nombre del evento. Si el parámetro es nulo, se eliminarán todos los detectores de eventos; manejador de función de procesamiento de eventos, si el parámetro es nulo, se eliminarán todos los detectores de eventos; el último parámetro es el contexto de contexto, que muestra la página.
La operación principal de esta función es juzgar si los parámetros son nulos y luego realizar las operaciones anteriores para determinar la función de procesamiento de eventos que se eliminará.En el cuerpo del método, podemos ver que el ciclo for se usa para atravesar los eventos vinculantes. , descubra los eventos que no se eliminaron, muévalos a la nueva lista y luego elimine la cola de eventos original.
off: function (event, handler, context) {
let _h = this._$handlers;
if (!event) {
this._$handlers = {
};
return this;
}
if (handler) {
if (_h[event]) {
let newList = [];
for (let i = 0, l = _h[event].length; i < l; i++) {
if (_h[event][i].ctx !== context && _h[event][i].h !== handler) {
newList.push(_h[event][i]);
}
}
_h[event] = newList;
}
if (_h[event] && _h[event].length === 0) {
delete _h[event];
}
} else {
delete _h[event];
}
callListenerChanged(this, event);
return this;
},
isSilene, suspender, reanudar métodos
Además de estas funciones, existen otras funciones encargadas de desencadenar eventos, como isSilene, suspender, reanudar, etc. La función de isSilent Fang Afei es juzgar si la función de procesamiento de eventos está vinculada y se devuelve la longitud de la función de procesamiento.Si es 0, no está vinculada, es decir, no está vinculada. La función de la función de suspensión es suspender un evento, y el evento suspendido no se activará.Durante la interacción entre el mouse y la pantalla táctil, a menudo es necesario suspender temporalmente un evento para evitar un toque accidental. La función del método de reanudación es reanudar la activación, lo que corresponde al método de suspensión.
isSilent: function (event) {
let _h = this._$handlers;
return !_h[event] || !_h[event].length;
},
suspend: function (eventName) {
this._$suspends.add(eventName);
},
resume: function (eventName) {
this._$suspends.delete(eventName);
},
método de activación
El último método, este método es el disparador, que activa un evento cuando funciona, principalmente para procesar el parámetro entrante (nombre del evento), primero juzga si el nombre del evento existe, luego descubre el evento y luego pasa el interruptor para que coincida.
if (this._$suspends.has(eventName)) {
return;
}
let _h = this._$handlers[eventName];
let eventProcessor = this._$eventProcessor;
Esto es para hacer coincidir la longitud del arglen encontrado, de la sugerencia de optimización de la red troncal, para que coincida con la longitud.
let args = arguments;
let argLen = args.length;
switch (argLen) {
case 1:
hItem.h.call(hItem.ctx);
break;
case 2:
hItem.h.call(hItem.ctx, args[1]);
break;
case 3:
hItem.h.call(hItem.ctx, args[1], args[2]);
break;
case 4:
hItem.h.call(hItem.ctx, args[1], args[2], args[3]);
break;
case 5:
hItem.h.call(hItem.ctx, args[1], args[2], args[3], args[4]);
break;
default:
hItem.h.apply(hItem.ctx, args);
break;
}
Resumir
Los anteriores son todos los métodos en Eventful.js Después del análisis completo del cuerpo, discutimos la función real de cada método y analizamos el código clave en detalle. En general, el archivo js es responsable del núcleo del procesamiento de eventos, que desempeña un papel vital en el procesamiento de eventos de canvasRender.