mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
refactor: refactor wheel event and improve assets render
This commit is contained in:
chenshenhai
parent
8378886009
commit
92909d201c
13 changed files with 208 additions and 162 deletions
|
|
@ -85,15 +85,9 @@ export class Board<T extends BoardExtendEvent = BoardExtendEvent> {
|
|||
);
|
||||
|
||||
this._watcher.on(
|
||||
'wheelX',
|
||||
'wheel',
|
||||
throttle((e) => {
|
||||
this._handleWheelX(e);
|
||||
}, throttleTime)
|
||||
);
|
||||
this._watcher.on(
|
||||
'wheelY',
|
||||
throttle((e) => {
|
||||
this._handleWheelY(e);
|
||||
this._handleWheel(e);
|
||||
}, throttleTime)
|
||||
);
|
||||
this._watcher.on(
|
||||
|
|
@ -158,20 +152,10 @@ export class Board<T extends BoardExtendEvent = BoardExtendEvent> {
|
|||
}
|
||||
}
|
||||
|
||||
private _handleWheelX(e: BoardWatcherEventMap['wheelX']) {
|
||||
private _handleWheel(e: BoardWatcherEventMap['wheel']) {
|
||||
for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
|
||||
const obj = this._activeMiddlewareObjs[i];
|
||||
const result = obj?.wheelX?.(e);
|
||||
if (result === false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _handleWheelY(e: BoardWatcherEventMap['wheelY']) {
|
||||
for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
|
||||
const obj = this._activeMiddlewareObjs[i];
|
||||
const result = obj?.wheelY?.(e);
|
||||
const result = obj?.wheel?.(e);
|
||||
if (result === false) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -333,9 +317,6 @@ export class Board<T extends BoardExtendEvent = BoardExtendEvent> {
|
|||
const { width, height, devicePixelRatio } = newViewSize;
|
||||
const { viewContent } = this._opts;
|
||||
viewContent.viewContext.$resize({ width, height, devicePixelRatio });
|
||||
const canvas = viewContent.viewContext.canvas;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
viewContent.helperContext.$resize({ width, height, devicePixelRatio });
|
||||
viewContent.boardContext.$resize({ width, height, devicePixelRatio });
|
||||
this._viewer.drawFrame();
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
|
|||
|
||||
if (snapshot) {
|
||||
const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
|
||||
const { underContext, viewContext, helperContext, boardContext } = viewContent;
|
||||
|
||||
if (snapshot?.activeStore.data) {
|
||||
renderer.drawData(snapshot.activeStore.data, {
|
||||
|
|
@ -65,13 +64,9 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
|
|||
});
|
||||
}
|
||||
beforeDrawFrame({ snapshot });
|
||||
boardContext.clearRect(0, 0, width, height);
|
||||
boardContext.drawImage(underContext.canvas, 0, 0, width, height);
|
||||
boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
|
||||
boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
|
||||
underContext.clearRect(0, 0, width, height);
|
||||
viewContext.clearRect(0, 0, width, height);
|
||||
helperContext.clearRect(0, 0, width, height);
|
||||
|
||||
viewContent.drawView();
|
||||
|
||||
afterDrawFrame({ snapshot });
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -97,10 +97,8 @@ export class BoardWatcher extends EventEmitter<BoardWatcherEventMap> {
|
|||
|
||||
if (e.ctrlKey === true && this.has('wheelScale')) {
|
||||
this.trigger('wheelScale', { deltaX, deltaY, point });
|
||||
} else if (this.has('wheelX') && deltaX !== 0) {
|
||||
this.trigger('wheelX', { deltaX, point });
|
||||
} else if (this.has('wheelY') && deltaY !== 0) {
|
||||
this.trigger('wheelY', { deltaY, point });
|
||||
} else if (this.has('wheel')) {
|
||||
this.trigger('wheel', { deltaX, deltaY, point });
|
||||
}
|
||||
},
|
||||
{ passive: false }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent, ViewScaleInfo } from '@idraw/types';
|
||||
import { Board } from '@idraw/board';
|
||||
import { createBoardContexts, validateElements } from '@idraw/util';
|
||||
import { createViewContent, validateElements } from '@idraw/util';
|
||||
import { Cursor } from './lib/cursor';
|
||||
|
||||
// export { MiddlewareSelector } from './middleware/selector';
|
||||
|
|
@ -25,8 +25,7 @@ export class Core {
|
|||
this.#initContainer();
|
||||
container.appendChild(canvas);
|
||||
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const viewContent = createBoardContexts(ctx, { devicePixelRatio });
|
||||
const viewContent = createViewContent(canvas, { width, height, devicePixelRatio, offscreen: true });
|
||||
const board = new Board<CoreEvent>({ viewContent, container });
|
||||
const sharer = board.getSharer();
|
||||
sharer.setActiveViewSizeInfo({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { Point, BoardMiddleware, PointWatcherEvent, BoardWatherWheelXEvent, BoardWatherWheelYEvent } from '@idraw/types';
|
||||
import type { Point, BoardMiddleware, PointWatcherEvent, BoardWatherWheelEvent } from '@idraw/types';
|
||||
import { drawScroller, isPointInScrollThumb } from './util';
|
||||
// import type { ScrollbarThumbType } from './util';
|
||||
import { key, keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
|
||||
|
|
@ -55,25 +55,15 @@ export const MiddlewareScroller: BoardMiddleware = (opts) => {
|
|||
|
||||
return {
|
||||
mode: key,
|
||||
// hover: (e: PointWatcherEvent) => {
|
||||
// const { point } = e;
|
||||
// const thumbType = getThumbType(point);
|
||||
// if (thumbType === 'X' || thumbType === 'Y') {
|
||||
// return false;
|
||||
// }
|
||||
// },
|
||||
wheelX: (e: BoardWatherWheelXEvent) => {
|
||||
if (e.deltaX >= 0 || e.deltaX < 0) {
|
||||
viewer.scroll({ moveX: 0 - e.deltaX });
|
||||
viewer.drawFrame();
|
||||
}
|
||||
},
|
||||
wheelY: (e: BoardWatherWheelYEvent) => {
|
||||
if (e.deltaY >= 0 || e.deltaY < 0) {
|
||||
viewer.scroll({ moveY: 0 - e.deltaY });
|
||||
viewer.drawFrame();
|
||||
}
|
||||
|
||||
wheel: (e: BoardWatherWheelEvent) => {
|
||||
viewer.scroll({
|
||||
moveX: 0 - e.deltaX,
|
||||
moveY: 0 - e.deltaY
|
||||
});
|
||||
viewer.drawFrame();
|
||||
},
|
||||
|
||||
pointStart: (e: PointWatcherEvent) => {
|
||||
const { point } = e;
|
||||
const thumbType = getThumbType(point);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export {
|
|||
loadHTML,
|
||||
is,
|
||||
check,
|
||||
createBoardContexts,
|
||||
createViewContent,
|
||||
createContext2D,
|
||||
createOffscreenContext2D,
|
||||
EventEmitter,
|
||||
|
|
|
|||
|
|
@ -44,7 +44,14 @@ export function drawElement(ctx: ViewContext2D, elem: Element<ElementType>, opts
|
|||
break;
|
||||
}
|
||||
case 'group': {
|
||||
drawGroup(ctx, elem as Element<'group'>, opts);
|
||||
const assets = {
|
||||
...(opts.elementAssets || {}),
|
||||
...((elem as Element<'group'>).detail.assets || {})
|
||||
};
|
||||
drawGroup(ctx, elem as Element<'group'>, {
|
||||
...opts,
|
||||
elementAssets: assets
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@ export interface BoardWatherWheelYEvent {
|
|||
deltaY: number;
|
||||
point: Point;
|
||||
}
|
||||
export interface BoardWatherWheelEvent {
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
point: Point;
|
||||
}
|
||||
export type BoardWatherWheelScaleEvent = BoardWatherWheelXEvent & BoardWatherWheelYEvent;
|
||||
|
||||
export interface BoardWatherDrawFrameEvent<S extends Record<any | symbol, any>> {
|
||||
|
|
@ -38,10 +43,8 @@ export interface BoardWatcherEventMap<S extends Record<any | symbol, any> = any>
|
|||
pointEnd: BoardWatcherPointEvent;
|
||||
pointLeave: BoardWatcherPointEvent;
|
||||
doubleClick: BoardWatcherPointEvent;
|
||||
wheelX: BoardWatherWheelXEvent;
|
||||
wheelY: BoardWatherWheelYEvent;
|
||||
wheel: BoardWatherWheelEvent;
|
||||
wheelScale: BoardWatherWheelScaleEvent;
|
||||
// scale: BoardWatherScaleEvent;
|
||||
scrollX: BoardWatherScrollXEvent;
|
||||
scrollY: BoardWatherScrollYEvent;
|
||||
resize: BoardWatherResizeEvent;
|
||||
|
|
@ -63,8 +66,9 @@ export interface BoardMiddlewareObject<S extends Record<any | symbol, any> = any
|
|||
pointEnd?: (e: BoardWatcherEventMap<S>['pointEnd']) => void | boolean;
|
||||
pointLeave?: (e: BoardWatcherEventMap<S>['pointLeave']) => void | boolean;
|
||||
doubleClick?: (e: BoardWatcherEventMap<S>['doubleClick']) => void | boolean;
|
||||
wheelX?: (e: BoardWatcherEventMap<S>['wheelX']) => void | boolean;
|
||||
wheelY?: (e: BoardWatcherEventMap<S>['wheelY']) => void | boolean;
|
||||
// wheelX?: (e: BoardWatcherEventMap<S>['wheelX']) => void | boolean;
|
||||
// wheelY?: (e: BoardWatcherEventMap<S>['wheelY']) => void | boolean;
|
||||
wheel?: (e: BoardWatcherEventMap<S>['wheel']) => void | boolean;
|
||||
wheelScale?: (e: BoardWatcherEventMap<S>['wheelScale']) => void | boolean;
|
||||
|
||||
// scale?: (e: BoardWatcherEventMap<S>['scale']) => void | boolean;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export interface ViewContext2DOptions {
|
||||
devicePixelRatio?: number;
|
||||
offscreenCanvas?: OffscreenCanvas | null;
|
||||
}
|
||||
|
||||
export interface ViewContext2D {
|
||||
|
|
@ -9,7 +10,8 @@ export interface ViewContext2D {
|
|||
$getContext(): CanvasRenderingContext2D;
|
||||
$setFont(opts: { fontSize: number; fontFamily?: string; fontWeight?: string | number }): void;
|
||||
$resize(opts: { width: number; height: number; devicePixelRatio: number }): void;
|
||||
|
||||
$getSize(): { width: number; height: number; devicePixelRatio: number };
|
||||
$getOffscreenCanvas(): OffscreenCanvas | null;
|
||||
$undoPixelRatio(num: number): number;
|
||||
$doPixelRatio(num: number): number;
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export interface ViewContent {
|
|||
viewContext: ViewContext2D;
|
||||
helperContext: ViewContext2D;
|
||||
underContext: ViewContext2D;
|
||||
drawView: () => void;
|
||||
}
|
||||
|
||||
export interface ViewCalculatorOptions {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export { istype } from './lib/istype';
|
|||
export { loadImage, loadSVG, loadHTML } from './lib/load';
|
||||
export { is } from './lib/is';
|
||||
export { check } from './lib/check';
|
||||
export { createBoardContexts, createContext2D, createOffscreenContext2D } from './lib/canvas';
|
||||
export { createViewContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
|
||||
export { EventEmitter } from './lib/event';
|
||||
export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
|
||||
export { Store } from './lib/store';
|
||||
|
|
|
|||
|
|
@ -14,31 +14,82 @@ export function createContext2D(opts: { ctx?: CanvasRenderingContext2D; width: n
|
|||
return context2d;
|
||||
}
|
||||
|
||||
export function createOffscreenContext2D(opts: { width: number; height: number }) {
|
||||
const { width, height } = opts;
|
||||
const offCanvas = new OffscreenCanvas(width, height);
|
||||
export function createOffscreenContext2D(opts: { width: number; height: number; devicePixelRatio: number }): Context2D {
|
||||
const { width, height, devicePixelRatio } = opts;
|
||||
const offCanvas = new OffscreenCanvas(width * devicePixelRatio, height * devicePixelRatio);
|
||||
const offRenderCtx = offCanvas.getContext('2d') as OffscreenRenderingContext;
|
||||
const offCtx: CanvasRenderingContext2D | OffscreenRenderingContext = offRenderCtx.canvas.getContext('2d') as
|
||||
| CanvasRenderingContext2D
|
||||
| OffscreenRenderingContext;
|
||||
return offCtx;
|
||||
const context2d = new Context2D(offCtx, {
|
||||
devicePixelRatio,
|
||||
offscreenCanvas: offCanvas
|
||||
});
|
||||
return context2d;
|
||||
}
|
||||
|
||||
export function createBoardContexts(ctx: CanvasRenderingContext2D, opts?: { devicePixelRatio: number }): ViewContent {
|
||||
export function createViewContent(
|
||||
canvas: HTMLCanvasElement,
|
||||
opts: { width: number; height: number; devicePixelRatio: number; offscreen?: boolean }
|
||||
): ViewContent {
|
||||
const { width, height, devicePixelRatio, offscreen } = opts;
|
||||
const ctxOpts = {
|
||||
width: ctx.canvas.width,
|
||||
height: ctx.canvas.height,
|
||||
devicePixelRatio: opts?.devicePixelRatio || 1
|
||||
width,
|
||||
height,
|
||||
devicePixelRatio
|
||||
};
|
||||
const viewContext = createContext2D(ctxOpts);
|
||||
const helperContext = createContext2D(ctxOpts);
|
||||
const underContext = createContext2D(ctxOpts);
|
||||
const boardContext = createContext2D({ ctx, ...ctxOpts });
|
||||
const content: ViewContent = {
|
||||
underContext,
|
||||
viewContext,
|
||||
helperContext,
|
||||
boardContext
|
||||
};
|
||||
return content;
|
||||
|
||||
if (offscreen === true) {
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const viewContext = createOffscreenContext2D(ctxOpts);
|
||||
const helperContext = createOffscreenContext2D(ctxOpts);
|
||||
const underContext = createOffscreenContext2D(ctxOpts);
|
||||
const boardContext = createContext2D({ ctx, ...ctxOpts });
|
||||
|
||||
const drawView = () => {
|
||||
const { width: w, height: h } = viewContext.$getSize();
|
||||
|
||||
boardContext.clearRect(0, 0, w, h);
|
||||
boardContext.drawImage(underContext.canvas, 0, 0, w, h);
|
||||
boardContext.drawImage(viewContext.canvas, 0, 0, w, h);
|
||||
boardContext.drawImage(helperContext.canvas, 0, 0, w, h);
|
||||
underContext.clearRect(0, 0, w, h);
|
||||
viewContext.clearRect(0, 0, w, h);
|
||||
helperContext.clearRect(0, 0, w, h);
|
||||
};
|
||||
|
||||
const content: ViewContent = {
|
||||
underContext,
|
||||
viewContext,
|
||||
helperContext,
|
||||
boardContext,
|
||||
drawView
|
||||
};
|
||||
return content;
|
||||
} else {
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const viewContext = createContext2D(ctxOpts);
|
||||
const helperContext = createContext2D(ctxOpts);
|
||||
const underContext = createContext2D(ctxOpts);
|
||||
const boardContext = createContext2D({ ctx, ...ctxOpts });
|
||||
|
||||
const drawView = () => {
|
||||
boardContext.clearRect(0, 0, width, height);
|
||||
boardContext.drawImage(underContext.canvas, 0, 0, width, height);
|
||||
boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
|
||||
boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
|
||||
underContext.clearRect(0, 0, width, height);
|
||||
viewContext.clearRect(0, 0, width, height);
|
||||
helperContext.clearRect(0, 0, width, height);
|
||||
};
|
||||
|
||||
const content: ViewContent = {
|
||||
underContext,
|
||||
viewContext,
|
||||
helperContext,
|
||||
boardContext,
|
||||
drawView
|
||||
};
|
||||
return content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
import type { ViewContext2D, ViewContext2DOptions } from '@idraw/types';
|
||||
|
||||
export class Context2D implements ViewContext2D {
|
||||
private _ctx: CanvasRenderingContext2D;
|
||||
#ctx: CanvasRenderingContext2D;
|
||||
#opts: Required<ViewContext2DOptions>;
|
||||
|
||||
private _devicePixelRatio = 1;
|
||||
// private _width: number = 0;
|
||||
// private _height: number = 0;
|
||||
|
||||
constructor(ctx: CanvasRenderingContext2D, opts: ViewContext2DOptions) {
|
||||
const { devicePixelRatio = 1 } = opts;
|
||||
this._ctx = ctx;
|
||||
this._devicePixelRatio = devicePixelRatio;
|
||||
constructor(ctx: CanvasRenderingContext2D | OffscreenRenderingContext, opts: ViewContext2DOptions) {
|
||||
this.#ctx = ctx as CanvasRenderingContext2D;
|
||||
this.#opts = { ...{ devicePixelRatio: 1, offscreenCanvas: null }, ...opts };
|
||||
// this._width = ctx.canvas.width / devicePixelRatio;
|
||||
// this._height = ctx.canvas.height / devicePixelRatio;
|
||||
}
|
||||
|
||||
$undoPixelRatio(num: number) {
|
||||
return num / this._devicePixelRatio;
|
||||
return num / this.#opts.devicePixelRatio;
|
||||
}
|
||||
$doPixelRatio(num: number) {
|
||||
return this._devicePixelRatio * num;
|
||||
return this.#opts.devicePixelRatio * num;
|
||||
}
|
||||
|
||||
$getContext(): CanvasRenderingContext2D {
|
||||
return this._ctx;
|
||||
return this.#ctx;
|
||||
}
|
||||
|
||||
$setFont(opts: { fontSize: number; fontFamily?: string; fontWeight?: 'bold' | number | string }): void {
|
||||
|
|
@ -33,168 +32,187 @@ export class Context2D implements ViewContext2D {
|
|||
}
|
||||
strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
|
||||
strList.push(`${opts.fontFamily || 'sans-serif'}`);
|
||||
this._ctx.font = `${strList.join(' ')}`;
|
||||
this.#ctx.font = `${strList.join(' ')}`;
|
||||
}
|
||||
|
||||
$resize(opts: { width: number; height: number; devicePixelRatio: number }) {
|
||||
const { width, height, devicePixelRatio } = opts;
|
||||
const { canvas } = this._ctx;
|
||||
$getOffscreenCanvas(): OffscreenCanvas | null {
|
||||
return this.#opts.offscreenCanvas;
|
||||
}
|
||||
|
||||
$resize(opts: { width: number; height: number; devicePixelRatio: number; resetStyle?: boolean }) {
|
||||
const { width, height, devicePixelRatio, resetStyle } = opts;
|
||||
const { canvas } = this.#ctx;
|
||||
canvas.width = width * devicePixelRatio;
|
||||
canvas.height = height * devicePixelRatio;
|
||||
// canvas.style.width = `${width}px`;
|
||||
// canvas.style.height = `${height}px`;
|
||||
// this._width = width;
|
||||
// this._height = height;
|
||||
this._devicePixelRatio = devicePixelRatio;
|
||||
this.#opts = {
|
||||
...this.#opts,
|
||||
...{
|
||||
devicePixelRatio
|
||||
}
|
||||
};
|
||||
if (resetStyle === true) {
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
}
|
||||
}
|
||||
|
||||
$getSize(): { width: number; height: number; devicePixelRatio: number } {
|
||||
const { devicePixelRatio } = this.#opts;
|
||||
const { width, height } = this.#ctx.canvas;
|
||||
return {
|
||||
width: width / devicePixelRatio,
|
||||
height: height / devicePixelRatio,
|
||||
devicePixelRatio
|
||||
};
|
||||
}
|
||||
|
||||
get canvas() {
|
||||
return this._ctx.canvas;
|
||||
return this.#ctx.canvas;
|
||||
}
|
||||
|
||||
get fillStyle() {
|
||||
return this._ctx.fillStyle;
|
||||
return this.#ctx.fillStyle;
|
||||
}
|
||||
set fillStyle(value: string | CanvasGradient | CanvasPattern) {
|
||||
this._ctx.fillStyle = value;
|
||||
this.#ctx.fillStyle = value;
|
||||
}
|
||||
|
||||
get strokeStyle() {
|
||||
return this._ctx.strokeStyle;
|
||||
return this.#ctx.strokeStyle;
|
||||
}
|
||||
set strokeStyle(color: string | CanvasGradient | CanvasPattern) {
|
||||
this._ctx.strokeStyle = color;
|
||||
this.#ctx.strokeStyle = color;
|
||||
}
|
||||
|
||||
get lineWidth() {
|
||||
return this.$undoPixelRatio(this._ctx.lineWidth);
|
||||
return this.$undoPixelRatio(this.#ctx.lineWidth);
|
||||
}
|
||||
set lineWidth(w: number) {
|
||||
this._ctx.lineWidth = this.$doPixelRatio(w);
|
||||
this.#ctx.lineWidth = this.$doPixelRatio(w);
|
||||
}
|
||||
|
||||
get textAlign(): CanvasTextAlign {
|
||||
return this._ctx.textAlign;
|
||||
return this.#ctx.textAlign;
|
||||
}
|
||||
set textAlign(align: CanvasTextAlign) {
|
||||
this._ctx.textAlign = align;
|
||||
this.#ctx.textAlign = align;
|
||||
}
|
||||
|
||||
get textBaseline() {
|
||||
return this._ctx.textBaseline;
|
||||
return this.#ctx.textBaseline;
|
||||
}
|
||||
set textBaseline(baseline: CanvasTextBaseline) {
|
||||
this._ctx.textBaseline = baseline;
|
||||
this.#ctx.textBaseline = baseline;
|
||||
}
|
||||
|
||||
get globalAlpha() {
|
||||
return this._ctx.globalAlpha;
|
||||
return this.#ctx.globalAlpha;
|
||||
}
|
||||
set globalAlpha(alpha: number) {
|
||||
this._ctx.globalAlpha = alpha;
|
||||
this.#ctx.globalAlpha = alpha;
|
||||
}
|
||||
get shadowColor(): string {
|
||||
return this._ctx.shadowColor;
|
||||
return this.#ctx.shadowColor;
|
||||
}
|
||||
set shadowColor(color: string) {
|
||||
this._ctx.shadowColor = color;
|
||||
this.#ctx.shadowColor = color;
|
||||
}
|
||||
|
||||
get shadowOffsetX() {
|
||||
return this.$undoPixelRatio(this._ctx.shadowOffsetX);
|
||||
return this.$undoPixelRatio(this.#ctx.shadowOffsetX);
|
||||
}
|
||||
set shadowOffsetX(offsetX: number) {
|
||||
this._ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
|
||||
this.#ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
|
||||
}
|
||||
|
||||
get shadowOffsetY(): number {
|
||||
return this.$undoPixelRatio(this._ctx.shadowOffsetY);
|
||||
return this.$undoPixelRatio(this.#ctx.shadowOffsetY);
|
||||
}
|
||||
set shadowOffsetY(offsetY: number) {
|
||||
this._ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
|
||||
this.#ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
|
||||
}
|
||||
|
||||
get shadowBlur(): number {
|
||||
return this.$undoPixelRatio(this._ctx.shadowBlur);
|
||||
return this.$undoPixelRatio(this.#ctx.shadowBlur);
|
||||
}
|
||||
set shadowBlur(blur: number) {
|
||||
this._ctx.shadowBlur = this.$doPixelRatio(blur);
|
||||
this.#ctx.shadowBlur = this.$doPixelRatio(blur);
|
||||
}
|
||||
|
||||
get lineCap() {
|
||||
return this._ctx.lineCap;
|
||||
return this.#ctx.lineCap;
|
||||
}
|
||||
set lineCap(lineCap: CanvasLineCap) {
|
||||
this._ctx.lineCap = lineCap;
|
||||
this.#ctx.lineCap = lineCap;
|
||||
}
|
||||
|
||||
get globalCompositeOperation(): GlobalCompositeOperation {
|
||||
return this._ctx.globalCompositeOperation;
|
||||
return this.#ctx.globalCompositeOperation;
|
||||
}
|
||||
|
||||
set globalCompositeOperation(operations: GlobalCompositeOperation) {
|
||||
this._ctx.globalCompositeOperation = operations;
|
||||
this.#ctx.globalCompositeOperation = operations;
|
||||
}
|
||||
|
||||
fill(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void {
|
||||
return this._ctx.fill(...(args as [path: Path2D, fillRule?: CanvasFillRule | undefined]));
|
||||
return this.#ctx.fill(...(args as [path: Path2D, fillRule?: CanvasFillRule | undefined]));
|
||||
}
|
||||
|
||||
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined): void {
|
||||
return this._ctx.arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
|
||||
return this.#ctx.arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
|
||||
}
|
||||
|
||||
rect(x: number, y: number, w: number, h: number) {
|
||||
return this._ctx.rect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
|
||||
return this.#ctx.rect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
|
||||
}
|
||||
|
||||
fillRect(x: number, y: number, w: number, h: number) {
|
||||
return this._ctx.fillRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
|
||||
return this.#ctx.fillRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
|
||||
}
|
||||
|
||||
clearRect(x: number, y: number, w: number, h: number) {
|
||||
return this._ctx.clearRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
|
||||
return this.#ctx.clearRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
|
||||
}
|
||||
|
||||
beginPath() {
|
||||
return this._ctx.beginPath();
|
||||
return this.#ctx.beginPath();
|
||||
}
|
||||
|
||||
closePath() {
|
||||
return this._ctx.closePath();
|
||||
return this.#ctx.closePath();
|
||||
}
|
||||
|
||||
lineTo(x: number, y: number) {
|
||||
return this._ctx.lineTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
return this.#ctx.lineTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
}
|
||||
|
||||
moveTo(x: number, y: number) {
|
||||
return this._ctx.moveTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
return this.#ctx.moveTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
}
|
||||
|
||||
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void {
|
||||
return this._ctx.arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
|
||||
return this.#ctx.arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
|
||||
}
|
||||
|
||||
getLineDash() {
|
||||
return this._ctx.getLineDash();
|
||||
return this.#ctx.getLineDash();
|
||||
}
|
||||
|
||||
setLineDash(nums: number[]) {
|
||||
const dash = nums.map((n) => this.$doPixelRatio(n));
|
||||
return this._ctx.setLineDash(dash);
|
||||
return this.#ctx.setLineDash(dash);
|
||||
}
|
||||
|
||||
stroke(path?: Path2D) {
|
||||
return path ? this._ctx.stroke(path) : this._ctx.stroke();
|
||||
return path ? this.#ctx.stroke(path) : this.#ctx.stroke();
|
||||
}
|
||||
|
||||
translate(x: number, y: number) {
|
||||
return this._ctx.translate(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
return this.#ctx.translate(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
}
|
||||
|
||||
rotate(angle: number) {
|
||||
return this._ctx.rotate(angle);
|
||||
return this.#ctx.rotate(angle);
|
||||
}
|
||||
|
||||
drawImage(...args: any[]) {
|
||||
|
|
@ -210,7 +228,7 @@ export class Context2D implements ViewContext2D {
|
|||
const dh: number = args[args.length - 1];
|
||||
|
||||
if (args.length === 9) {
|
||||
return this._ctx.drawImage(
|
||||
return this.#ctx.drawImage(
|
||||
image,
|
||||
this.$doPixelRatio(sx),
|
||||
this.$doPixelRatio(sy),
|
||||
|
|
@ -222,45 +240,45 @@ export class Context2D implements ViewContext2D {
|
|||
this.$doPixelRatio(dh)
|
||||
);
|
||||
} else {
|
||||
return this._ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
|
||||
return this.#ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
|
||||
}
|
||||
}
|
||||
|
||||
createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null {
|
||||
return this._ctx.createPattern(image, repetition);
|
||||
return this.#ctx.createPattern(image, repetition);
|
||||
}
|
||||
|
||||
measureText(text: string): TextMetrics {
|
||||
const textMetrics = this._ctx.measureText(text);
|
||||
const textMetrics = this.#ctx.measureText(text);
|
||||
return textMetrics;
|
||||
}
|
||||
|
||||
fillText(text: string, x: number, y: number, maxWidth?: number | undefined): void {
|
||||
if (maxWidth !== undefined) {
|
||||
return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
|
||||
return this.#ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
|
||||
} else {
|
||||
return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
return this.#ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
}
|
||||
}
|
||||
|
||||
strokeText(text: string, x: number, y: number, maxWidth?: number | undefined): void {
|
||||
if (maxWidth !== undefined) {
|
||||
return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
|
||||
return this.#ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
|
||||
} else {
|
||||
return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
return this.#ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
}
|
||||
}
|
||||
|
||||
save() {
|
||||
this._ctx.save();
|
||||
this.#ctx.save();
|
||||
}
|
||||
|
||||
restore() {
|
||||
this._ctx.restore();
|
||||
this.#ctx.restore();
|
||||
}
|
||||
|
||||
scale(ratioX: number, ratioY: number) {
|
||||
this._ctx.scale(ratioX, ratioY);
|
||||
this.#ctx.scale(ratioX, ratioY);
|
||||
}
|
||||
|
||||
circle(
|
||||
|
|
@ -273,7 +291,7 @@ export class Context2D implements ViewContext2D {
|
|||
endAngle: number,
|
||||
counterclockwise?: boolean | undefined
|
||||
) {
|
||||
this._ctx.ellipse(
|
||||
this.#ctx.ellipse(
|
||||
this.$doPixelRatio(x),
|
||||
this.$doPixelRatio(y),
|
||||
this.$doPixelRatio(radiusX),
|
||||
|
|
@ -286,27 +304,27 @@ export class Context2D implements ViewContext2D {
|
|||
}
|
||||
|
||||
isPointInPath(x: number, y: number) {
|
||||
return this._ctx.isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
return this.#ctx.isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
}
|
||||
|
||||
// clip(fillRule?: CanvasFillRule): void;
|
||||
// clip(path: Path2D, fillRule?: CanvasFillRule): void;
|
||||
clip(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]) {
|
||||
return this._ctx.clip(...(args as any[]));
|
||||
return this.#ctx.clip(...(args as any[]));
|
||||
}
|
||||
|
||||
setTransform(a: number, b: number, c: number, d: number, e: number, f: number) {
|
||||
return this._ctx.setTransform(a, b, c, d, e, f);
|
||||
return this.#ctx.setTransform(a, b, c, d, e, f);
|
||||
}
|
||||
getTransform(): DOMMatrix2DInit {
|
||||
return this._ctx.getTransform();
|
||||
return this.#ctx.getTransform();
|
||||
}
|
||||
|
||||
createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient {
|
||||
return this._ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
|
||||
return this.#ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
|
||||
}
|
||||
createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient {
|
||||
return this._ctx.createRadialGradient(
|
||||
return this.#ctx.createRadialGradient(
|
||||
this.$doPixelRatio(x0),
|
||||
this.$doPixelRatio(y0),
|
||||
this.$doPixelRatio(r0),
|
||||
|
|
@ -316,6 +334,6 @@ export class Context2D implements ViewContext2D {
|
|||
);
|
||||
}
|
||||
createConicGradient(startAngle: number, x: number, y: number): CanvasGradient {
|
||||
return this._ctx.createConicGradient(startAngle, this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
return this.#ctx.createConicGradient(startAngle, this.$doPixelRatio(x), this.$doPixelRatio(y));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue