概述
Canvas渲染器是Leaflet的一个内置的高效矢量图形渲染器，用于在HTML5的Canvas元素上绘制矢量图形。它继承自Renderer类，提供了基本的渲染功能，如路径绘制、样式设置和事件处理。
源码分析
源码实现
Canvas渲染器源码实现如下：
export var Canvas = Renderer.extend({
options: {
tolerance: 0, //控制路径简化精度，用于优化复杂路径的渲染性能，0表示不简化
},
getEvents: function () {
var events = Renderer.prototype.getEvents.call(this);
events.viewprereset = this._onViewPreReset; // 监听视图预重置事件
return events;
},
_onViewPreReset: function () {
this._postponeUpdatePaths = true;
},
onAdd: function () {
Renderer.prototype.onAdd.call(this); // 调用父类方法绑定容器
this._draw(); // 初始绘制
},
_initContainer: function () {
// 创建 Canvas 元素
var container = (this._container = document.createElement("canvas"));
// 绑定鼠标事件
DomEvent.on(container, "mousemove", this._onMouseMove, this);
DomEvent.on(
container,
"click dblclick mousedown mouseup contextmenu",
this._onClick,
this
);
DomEvent.on(container, "mouseout", this._handleMouseOut, this);
container["_leaflet_disable_events"] = true; // 禁用事件冒泡，避免事件穿透到地图容器
// 获取 Canvas 2D 上下文
this._ctx = container.getContext("2d");
},
_destroyContainer: function () {
Util.cancelAnimFrame(this._redrawRequest); // 取消待处理的重绘请求
delete this._ctx; // 清理上下文
DomUtil.remove(this._container); // 移除DOM元素
DomEvent.off(this._container); // 解绑事件
delete this._container; // 清理DOM元素引用
},
_updatePaths: function () {
if (this._postponeUpdatePaths) {
return;
}
var layer;
this._redrawBounds = null;
// 遍历图层，更新图层的像素坐标
for (var id in this._layers) {
layer = this._layers[id];
layer._update();
}
this._redraw(); //执行重绘
},
_update: function () {
if (this._map._animatingZoom && this._bounds) {
return;
}
Renderer.prototype._update.call(this);
var b = this._bounds,
container = this._container,
size = b.getSize(),
m = Browser.retina ? 2 : 1;
DomUtil.setPosition(container, b.min);
// Retina 优化
container.width = m * size.x;
container.height = m * size.y;
container.style.width = size.x + "px";
container.style.height = size.y + "px";
if (Browser.retina) {
// Retina 下缩放画布
this._ctx.scale(2, 2);
}
// 调整坐标系偏移
this._ctx.translate(-b.min.x, -b.min.y);
// 触发update事件
this.fire("update");
},
// 视图重置后恢复路径更新
_reset: function () {
Renderer.prototype._reset.call(this);
if (this._postponeUpdatePaths) {
this._postponeUpdatePaths = false;
this._updatePaths();
}
},
_initPath: function (layer) {
this._updateDashArray(layer);
this._layers[Util.stamp(layer)] = layer;
// 双向链表结构
var order = (layer._order = {
layer: layer,
prev: this._drawLast,
next: null,
});
if (this._drawLast) {
this._drawLast.next = order;
}
this._drawLast = order;
this._drawFirst = this._drawFirst || this._drawLast;
},
_addPath: function (layer) {
this._requestRedraw(layer);// 添加图层后触发重绘
},
_removePath: function (layer) {
var order = layer._order;
var next = order.next;
var prev = order.prev;
// 从链表中移除节点，更新头尾指针
if (next) {
next.prev = prev;
} else {
this._drawLast = prev;
}
if (prev) {
prev.next = next;
} else {
this._drawFirst = next;
}
delete layer._order;
delete this._layers[Util.stamp(layer)]; // 从图层集合中移除
this._requestRedraw(layer);
},
_updatePath: function (layer) {
this._extendRedrawBounds(layer);
layer._project();
layer._update();
this._requestRedraw(layer);
},
_updateStyle: function (layer) {
this._updateDashArray(layer);
this._requestRedraw(layer);
},
_updateDashArray: function (layer) {
if (typeof layer.options.dashArray === "string") {
var parts = layer.options.dashArray.split(/[, ]+/),
dashArray = [],
dashValue,
i;
for (i = 0; i < parts.length; i++) {
dashValue = Number(parts[i]);
if (isNaN(dashValue)) {
return;
}
dashArray.push(dashValue);
}
layer.options._dashArray = dashArray;
} else {
layer.options._dashArray = layer.options.dashArray;
}
},
_requestRedraw: function (layer) {
if (!this._map) {
return;
}
this._extendRedrawBounds(layer);
this._redrawRequest =
this._redrawRequest || Util.requestAnimFrame(this._redraw, this); // 合并重绘请求
},
_extendRedrawBounds: function (layer) {
// 计算需重绘的区域
if (layer._pxBounds) {
var padding = (layer.options.weight || 0) + 1;
this._redrawBounds = this._redrawBounds || new Bounds();
this._redrawBounds.extend(
layer._pxBounds.min.subtract([padding, padding])
);
this._redrawBounds.extend(layer._pxBounds.max.add([padding, padding]));
}
},
_redraw: function () {
this._redrawRequest = null;
if (this._redrawBounds) {
this._redrawBounds.min._floor();
this._redrawBounds.max._ceil();
}
this._clear(); //清空画布或局部区域
this._draw(); // 重新绘制所有可见图层
this._redrawBounds = null;
},
// 清空画布内容
_clear: function () {
var bounds = this._redrawBounds;
if (bounds) {
// 局部清除
var size = bounds.getSize();
this._ctx.clearRect(bounds.min.x, bounds.min.y, size.x, size.y);
} else {
this._ctx.save();
this._ctx.setTransform(1, 0, 0, 1, 0, 0);
// 全屏清除
this._ctx.clearRect(0, 0, this._container.width, this._container.height);
this._ctx.restore();
}
},
_draw: function () {
var layer,
bounds = this._redrawBounds;
this._ctx.save();
if (bounds) {
var size = bounds.getSize();
this._ctx.beginPath();
this._ctx.rect(bounds.min.x, bounds.min.y, size.x, size.y);
this._ctx.clip(); // 局部重绘时设置裁剪区域
}
this._drawing = true;
// 遍历链表
for (var order = this._drawFirst; order; order = order.next) {
layer = order.layer;
// 按顺序绘制图层
if (!bounds || (layer._pxBounds && layer._pxBounds.intersects(bounds))) {
layer._updatePath();
}
}
this._drawing = false;
this._ctx.restore();
},
// 绘制多边形或线段的路径
_updatePoly: function (layer, closed) {
if (!this._drawing) {
return;
}
var i,
j,
len2,
p,
parts = layer._parts,
len = parts.length,
ctx = this._ctx;
if (!len) {
return;
}
ctx.beginPath();
for (i = 0; i < len; i++) {
for (j = 0, len2 = parts[i].length; j < len2; j++) {
p = parts[i][j];
ctx[j ? "lineTo" : "moveTo"](p.x, p.y);
}
//是否闭合
if (closed) {
ctx.closePath();
}
}
this._fillStroke(ctx, layer); // 填充和描边
},
// 绘制圆形或椭圆
_updateCircle: function (layer) {
if (!this._drawing || layer._empty()) {
return;
}
var p = layer._point,
ctx = this._ctx,
r = Math.max(Math.round(layer._radius), 1),
s = (Math.max(Math.round(layer._radiusY), 1) || r) / r;
if (s !== 1) {
ctx.save();
ctx.scale(1, s);
}
ctx.beginPath();
ctx.arc(p.x, p.y / s, r, 0, Math.PI * 2, false); // 绘制圆形路径
// 处理椭圆缩放
if (s !== 1) {
ctx.restore();
}
this._fillStroke(ctx, layer);
},
_fillStroke: function (ctx, layer) {
var options = layer.options;
if (options.fill) {
ctx.globalAlpha = options.fillOpacity;
ctx.fillStyle = options.fillColor || options.color;
ctx.fill(options.fillRule || "evenodd");
}
if (options.stroke && options.weight !== 0) {
// 虚线支持
if (ctx.setLineDash) {
ctx.setLineDash((layer.options && layer.options._dashArray) || []);
}
ctx.globalAlpha = options.opacity;
ctx.lineWidth = options.weight;
ctx.strokeStyle = options.color;
ctx.lineCap = options.lineCap;
ctx.lineJoin = options.lineJoin;
ctx.stroke();
}
},
_onClick: function (e) {
var point = this._map.mouseEventToLayerPoint(e),
layer,
clickedLayer;
for (var order = this._drawFirst; order; order = order.next) {
layer = order.layer;
//检测点击目标图层
if (layer.options.interactive && layer._containsPoint(point)) {
if (
!(e.type === "click" || e.type === "preclick") ||
!this._map._draggableMoved(layer)
) {
clickedLayer = layer;
}
}
}
this._fireEvent(clickedLayer ? [clickedLayer] : false, e); //触发事件
},
_onMouseMove: function (e) {
if (!this._map || this._map.dragging.moving() || this._map._animatingZoom) {
return;
}
var point = this._map.mouseEventToLayerPoint(e);
this._handleMouseHover(e, point);
},
_handleMouseOut: function (e) {
var layer = this._hoveredLayer;
if (layer) {
DomUtil.removeClass(this._container, "leaflet-interactive");
this._fireEvent([layer], e, "mouseout");
this._hoveredLayer = null;
this._mouseHoverThrottled = false;
}
},
_handleMouseHover: function (e, point) {
if (this._mouseHoverThrottled) {
return;
}
var layer, candidateHoveredLayer;
for (var order = this._drawFirst; order; order = order.next) {
layer = order.layer;
if (layer.options.interactive && layer._containsPoint(point)) {
candidateHoveredLayer = layer;
}
}
if (candidateHoveredLayer !== this._hoveredLayer) {
this._handleMouseOut(e);
if (candidateHoveredLayer) {
DomUtil.addClass(this._container, "leaflet-interactive"); // change cursor
this._fireEvent([candidateHoveredLayer], e, "mouseover");
this._hoveredLayer = candidateHoveredLayer;
}
}
this._fireEvent(this._hoveredLayer ? [this._hoveredLayer] : false, e);
this._mouseHoverThrottled = true;
setTimeout(
Util.bind(function () {
this._mouseHoverThrottled = false;
}, this),
32
);
},
_fireEvent: function (layers, e, type) {
this._map._fireDOMEvent(e, type || e.type, layers);
},
_bringToFront: function (layer) {
var order = layer._order;
if (!order) {
return;
}
var next = order.next;
var prev = order.prev;
if (next) {
next.prev = prev;
} else {
return;
}
if (prev) {
prev.next = next;
} else if (next) {
this._drawFirst = next;
}
order.prev = this._drawLast;
this._drawLast.next = order;
order.next = null;
this._drawLast = order;
this._requestRedraw(layer);
},
_bringToBack: function (layer) {
var order = layer._order;
if (!order) {
return;
}
var next = order.next;
var prev = order.prev;
if (prev) {
prev.next = next;
} else {
return;
}
if (next) {
next.prev = prev;
} else if (prev) {
this._drawLast = prev;
}
order.prev = null;
order.next = this._drawFirst;
this._drawFirst.prev = order;
this._drawFirst = order;
this._requestRedraw(layer);
},
});
export function canvas(options) {
return Browser.canvas ? new Canvas(options) : null;
}
源码解析
生命周期管理
-
getEvents()：在地图重置前标记_postponeUpdatePaths，延迟路径更新 -
onAdd()：将Canvas容器添加到地图后立即渲染 -
_initContainer()：通过DOM事件实现Canvas图层交互 -
_destroyContainer()：销毁时释放资源，防止内存泄漏
渲染更新机制
-
_update()：通过scale和translate适配高清屏与地图偏移 -
_requestRedraw()与_extendRedrawBounds：性能优化，使用requestAnimFrame批量处理重绘，局部更新减少渲染开销
路径管理（双向链表）
-
_initPath：通过链表结构管理图层渲染顺序，确保bringToFront/bringToBack高效执行 -
addPath(layer)和_removePath(layer)：动态维护链表结构，支持图层增删
绘制核心逻辑
-
_draw()：通过裁剪区域(clip)限制绘制范围，提升性能 -
_updatePoly(layer,closed)和_updateCircle(layer)：根据几何图形的类型，调用不同的Canvas API绘制路径 -
_fillStroke(ctx, layer)：填充和描边逻辑，支持虚线
交互处理
-
_onClick(e)：通过遍历图层，检测点击目标图层 -
_onMouseMove(e)和_handleMouseHover(e, point)：通过_containsPoint判断鼠标位置，触发mouseover和mouseout事件
总结
Canvas渲染器的核心设计：
1. 性能优化：局部重绘、链表管理、requestAnimFrame 批量更新。
2. 交互实现：通过坐标转换与路径检测模拟 DOM 事件。
3. 渲染隔离：双向链表维护绘制顺序，Retina 适配。
4. 扩展性：统一接口支持多种几何类型（线、多边形、圆）
扫一扫
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
