├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── src ├── context │ ├── my.ts │ └── wx.ts ├── index.ts └── util.ts ├── tsconfig.json └── typings.d.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | lib/ 3 | esm/ 4 | dist/ 5 | package-lock.json 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT LICENSE 2 | 3 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # F2针对多端的context适配 2 | 3 | 不同端的环境对context还是会有些差异，尤其是小程序环境，这个库就是把不同端的context统一成F2使用的标准context 4 | 5 | ## 目前适配的context 6 | 1. 微信小程序 7 | 2. 支付宝小程序 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@antv/f2-context", 3 | "version": "0.0.1", 4 | "description": "F2针对多端的context适配", 5 | "main": "lib/index.js", 6 | "module": "esm/index.js", 7 | "types": "esm/index.d.ts", 8 | "files": [ 9 | "package.json", 10 | "esm", 11 | "lib", 12 | "src", 13 | "LICENSE", 14 | "README.md" 15 | ], 16 | "scripts": { 17 | "build": "npm run clean && npm run build:esm && npm run build:cjs", 18 | "build:esm": "tsc -d -p tsconfig.json --target ES5 --module ESNext --outDir esm", 19 | "build:cjs": "tsc -d -p tsconfig.json --target ES5 --module CommonJS --outDir lib", 20 | "clean": "rm -rf esm lib" 21 | }, 22 | "keywords": [], 23 | "dependencies": {}, 24 | "devDependencies": { 25 | "typescript": "^3.7.4" 26 | }, 27 | "homepage": "https://github.com/antvis/f2-contex", 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/antvis/f2-context" 31 | }, 32 | "author": "https://github.com/orgs/antvis/people", 33 | "bugs": { 34 | "url": "https://github.com/antvis/f2-context/issues" 35 | }, 36 | "license": "MIT", 37 | "publishConfig": { 38 | "access": "public" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/context/my.ts: -------------------------------------------------------------------------------- 1 | // 支付宝小程序的context适配 2 | 3 | const CAPITALIZED_ATTRS_MAP = { 4 | fillStyle: 'FillStyle', 5 | fontSize: 'FontSize', 6 | globalAlpha: 'GlobalAlpha', 7 | opacity: 'GlobalAlpha', 8 | lineCap: 'LineCap', 9 | lineJoin: 'LineJoin', 10 | lineWidth: 'LineWidth', 11 | miterLimit: 'MiterLimit', 12 | strokeStyle: 'StrokeStyle', 13 | textAlign: 'TextAlign', 14 | textBaseline: 'TextBaseline', 15 | shadow: 'Shadow', 16 | font: 'Font' 17 | }; 18 | 19 | function strLen(str: string) { 20 | let len = 0; 21 | for (let i = 0; i < str.length; i++) { 22 | if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) { 23 | len++; 24 | } else { 25 | len += 2; 26 | } 27 | } 28 | return len; 29 | } 30 | 31 | export default (ctx: any) => { 32 | Object.keys(CAPITALIZED_ATTRS_MAP).map(key => { 33 | Object.defineProperty(ctx, key, { 34 | set(value) { 35 | // 记录最新设置的值 36 | ctx[`__${key}`] = value; 37 | if (key === 'shadow' && ctx.setShadow && Array.isArray(value)) { 38 | ctx.setShadow(value[0], value[1], value[2], value[3]); 39 | return; 40 | } 41 | const name = 'set' + CAPITALIZED_ATTRS_MAP[key]; 42 | if (!ctx[name]) { 43 | return; 44 | } 45 | ctx[name](value); 46 | } 47 | }); 48 | return key; 49 | }); 50 | 51 | // 钉钉钉钉小程序框架不支持 measureText 方法，用此方法 mock 52 | if (!ctx.measureText) { 53 | ctx.measureText = (text: string) => { 54 | let fontSize = 12; 55 | const font = ctx.__font; 56 | if (font) { 57 | fontSize = parseInt(font.split(' ')[3], 10); 58 | } 59 | fontSize /= 2; 60 | return { 61 | width: strLen(text) * fontSize 62 | }; 63 | } 64 | } 65 | return ctx; 66 | } 67 | -------------------------------------------------------------------------------- /src/context/wx.ts: -------------------------------------------------------------------------------- 1 | // 微信程序的context适配 2 | 3 | const CAPITALIZED_ATTRS_MAP = { 4 | fontSize: 'FontSize', 5 | opacity: 'GlobalAlpha', 6 | lineDash: 'LineDash', 7 | textAlign: 'TextAlign', 8 | }; 9 | 10 | /** 11 | * wxapp textAlign align 可选值为 left|center|right 12 | * 标准canvas textAlign align 可选值为 left|center|right|start|end 13 | */ 14 | const TEXT_ALIGN_MAP = { 15 | start: 'left', 16 | end: 'right', 17 | }; 18 | 19 | export default (ctx: any) => { 20 | Object.keys(CAPITALIZED_ATTRS_MAP).map(style => { 21 | Object.defineProperty(ctx, style, { 22 | set: value => { 23 | if (style === 'textAlign') { 24 | value = TEXT_ALIGN_MAP[value] ? TEXT_ALIGN_MAP[value] : value; 25 | } 26 | const name = 'set' + CAPITALIZED_ATTRS_MAP[style]; 27 | ctx[name](value); 28 | } 29 | }); 30 | return style; 31 | }); 32 | } 33 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import wx from './context/wx'; 2 | import my from './context/my'; 3 | import { isWx, isMy } from './util'; 4 | 5 | const auto = (ctx: any) => { 6 | if (isWx) { 7 | return wx(ctx); 8 | } 9 | if (isMy) { 10 | return my(ctx); 11 | } 12 | return ctx; 13 | } 14 | 15 | export { 16 | auto, 17 | wx, 18 | my 19 | } 20 | -------------------------------------------------------------------------------- /src/util.ts: -------------------------------------------------------------------------------- 1 | // weixin miniprogram 2 | // @ts-ignore 3 | const isWx = (typeof wx === 'object') && (typeof wx.getSystemInfoSync === 'function'); 4 | 5 | // ant miniprogram 6 | // @ts-ignore 7 | const isMy = (typeof my === 'object') && (typeof my.getSystemInfoSync === 'function'); 8 | 9 | export { 10 | isWx, 11 | isMy, 12 | } 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | }, 4 | "include": [ 5 | "src/**/*.ts" 6 | ] 7 | } -------------------------------------------------------------------------------- /typings.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antvis/f2-context/17dcde573bd8d42d7f3e1e80bb5975710228fce3/typings.d.ts --------------------------------------------------------------------------------