Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[g] raf 等 window 方法应该放在 Canvas 上 #953

Closed
xiaoiver opened this issue Apr 13, 2022 · 0 comments
Closed

[g] raf 等 window 方法应该放在 Canvas 上 #953

xiaoiver opened this issue Apr 13, 2022 · 0 comments
Assignees
Labels

Comments

@xiaoiver
Copy link
Contributor

xiaoiver commented Apr 13, 2022

对于非浏览器环境,不存在 window.raf 的情况下,提供创建画布时传入的方式。
但不应该在全局范围内 patch,还是应该放在 Canvas 上。

理由是我们的 Canvas 对位到 window,在多个 Canvas 存在的场景下,前一个销毁不会影响到后一个使用。

export interface ICanvas extends IEventTarget {
  devicePixelRatio: number;
  requestAnimationFrame: (callback: FrameRequestCallback) => number;
  cancelAnimationFrame: (handle: number) => void;
}

另外考虑到小程序环境(深感这种非标准环境就跟曾经的 IE 一样,不想着朝标准靠拢,却总要使用者适配),需要在 Canvas 初始化参数上新增,让 window.requestAnimationFrame / devicePixelRatio / Image / TouchEvent / PointerEvent 这些都能正常使用。

我们原本也使用了和 hammer.js 中一致的方法,来判断当前环境是否支持 Touch / PointerEvent,这会影响到事件系统如何格式化传入的原生事件,以及触发何种标准事件,例如如果检测到环境不支持 TouchEvent,系统就不会触发 touchstart 等减少传播处理。本身 globalThis 这样的标准属性就是为了减少对于 global / window / self 的判断,但在小程序这样的环境中完全无法使用:

export const SUPPORT_TOUCH = 'ontouchstart' in globalThis;
export const SUPPORT_POINTER_EVENTS = !!globalThis.PointerEvent;

解决方案是在 Canvas 上提供一系列 limits 方法,例如是否支持 PointerEvent,默认使用者不传则使用 globalThis 判断,传则覆盖(例如小程序环境需要告知是否支持,以及如何判断一个原生交互事件是哪一类):

interface CanvasConfig {
  supportPointerEvent?: () => boolean;
  supportMouseEvent?: () => boolean;
  supportTouchEvent?: () => boolean;
  isTouchEvent: (event: InteractivePointerEvent) => event is TouchEvent;
  isMouseEvent: (event: InteractivePointerEvent) => event is MouseEvent;
}
@xiaoiver xiaoiver self-assigned this Apr 13, 2022
@xiaoiver xiaoiver added the bug label Apr 13, 2022
xiaoiver added a commit that referenced this issue Apr 23, 2022
xiaoiver added a commit that referenced this issue Apr 28, 2022
* fix: test whether native event came from context's dom element #928

* fix: add offscreenCanvas in Canvas config  #940

* feat: add CSS API, includes CSS Typed OM & Layout API

* fix: add shadow for Line / Polyline / Path #959

* feat: add  for multiple-layer picking #948

* fix: put raf/cancelRaf to Canvas #953

* fix: add limits query such as  to Canvas #953

* fix: account for 'none' value in <color> #952

* feat: support multi-layer picking in g-webgl #948

* fix: support  when picking in g-webgl #952

* feat: support inheritance in style system

* fix: encode html entity in g-svg #963

* feat: add get/setLocalMatrix for legacy G4.0

* fix: animations example

* feat: add pointerEvents property #942

* fix: skip number2string when parsing number

* Publish

 - @antv/g-canvas@1.0.20
 - @antv/g-components@1.0.18
 - @antv/g-devtool@0.3.4
 - @antv/g-math@1.0.18
 - @antv/g-mobile-canvas@0.0.2
 - @antv/g-mobile-svg@0.0.2
 - @antv/g-mobile-webgl@0.0.2
 - @antv/g-mobile@1.0.5
 - @antv/g-plugin-3d@1.0.22
 - @antv/g-plugin-box2d@1.0.11
 - @antv/g-plugin-canvas-picker@1.0.18
 - @antv/g-plugin-canvas-renderer@1.0.18
 - @antv/g-plugin-control@1.0.19
 - @antv/g-plugin-css-select@1.0.18
 - @antv/g-plugin-dom-interaction@1.0.18
 - @antv/g-plugin-gpgpu@1.0.19
 - @antv/g-plugin-html-renderer@1.0.19
 - @antv/g-plugin-matterjs@1.0.8
 - @antv/g-plugin-mobile-interaction@0.0.7
 - @antv/g-plugin-physx@1.0.11
 - @antv/g-plugin-svg-picker@1.0.18
 - @antv/g-plugin-svg-renderer@1.0.18
 - @antv/g-plugin-webgl-renderer@1.0.24
 - @antv/g-plugin-yoga@1.0.8
 - @antv/g-shader-components@1.0.16
 - @antv/g-svg@1.0.18
 - @antv/g-web-component@1.0.5
 - @antv/g-webgl@1.0.24
 - @antv/g-webgpu-compiler@1.0.19
 - @antv/g@5.0.21
 - @antv/react-g@1.0.14
 - @antv/g-site@1.0.24

* publish

Co-authored-by: yuqi.pyq <yuqi.pyq@antgroup.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant