From e62c5b30c1f2525b874d3264c11f409a6a5a2292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=B0=91?= Date: Wed, 28 Sep 2022 19:43:53 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dcircle=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vantui-demo/config/index.js | 9 +- packages/vantui-demo/src/styles/kwai.less | 5 - packages/vantui-doc/src/circle/README.md | 6 +- packages/vantui/src/circle/index.tsx | 236 +++++++++------------- packages/vantui/src/style/var.less | 4 +- packages/vantui/types/circle.d.ts | 1 - 6 files changed, 106 insertions(+), 155 deletions(-) delete mode 100644 packages/vantui-demo/src/styles/kwai.less diff --git a/packages/vantui-demo/config/index.js b/packages/vantui-demo/config/index.js index c59fa3b16..e48c42f73 100644 --- a/packages/vantui-demo/config/index.js +++ b/packages/vantui-demo/config/index.js @@ -74,14 +74,7 @@ const config = { hack: `true; @import "${npath.join( process.cwd(), 'src/styles/index.less', - )}";${ - process.env.TARO_ENV === 'kwai' - ? `@import "${npath.join( - process.cwd(), - 'src/styles/kwai.less', - )}";` - : '' - }`, + )}";`, }, }, // 适用于全局引入样式 diff --git a/packages/vantui-demo/src/styles/kwai.less b/packages/vantui-demo/src/styles/kwai.less deleted file mode 100644 index 1e63c0fec..000000000 --- a/packages/vantui-demo/src/styles/kwai.less +++ /dev/null @@ -1,5 +0,0 @@ -// 快手不支持css变量var，所以这里重写主题方法，通过config/index的lessOptions注入进去 -.theme(@property, @imp) { - @{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig')); - // @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig')); -} diff --git a/packages/vantui-doc/src/circle/README.md b/packages/vantui-doc/src/circle/README.md index df1688e19..0a82d6034 100644 --- a/packages/vantui-doc/src/circle/README.md +++ b/packages/vantui-doc/src/circle/README.md @@ -36,7 +36,7 @@ function Demo() { const [value, setValue] = react.useState(50) return ( - + - + @@ -91,7 +90,6 @@ function Demo() { | fill | - | _  string
_ | - | `false` | | layerColor | - | _  string
_ | - | `false` | | color | - | _  attr:
    ¦ string
    ¦ Record<
        string,
        string
      >
_ | - | `false` | -| type | - | _  string
_ | - | `false` | | strokeWidth | - | _  number
_ | - | `false` | | clockwise | - | _  boolean
_ | - | `false` | | children | - | _  ReactNode
_ | - | `false` | diff --git a/packages/vantui/src/circle/index.tsx b/packages/vantui/src/circle/index.tsx index ecaed5929..ad010ea2f 100644 --- a/packages/vantui/src/circle/index.tsx +++ b/packages/vantui/src/circle/index.tsx @@ -1,16 +1,9 @@ -import { - // createSelectorQuery, - createCanvasContext, - // useReady, -} from '@tarojs/taro' -import { useState, useRef, useEffect, useCallback } from 'react' -import { View, Canvas, CoverView } from '@tarojs/components' +import { createCanvasContext, createSelectorQuery } from '@tarojs/taro' +import { useRef, useState, useEffect, useCallback } from 'react' +import { View, Canvas } from '@tarojs/components' import { Current } from '@tarojs/runtime' - import { CircleProps } from '../../types/circle' -// import { getSystemInfoSync } from '../common/utils' import { isObj } from '../common/validator' -// import { adaptor } from './canvas' function format(rate: number) { return Math.min(Math.max(rate, 0), 100) @@ -18,19 +11,19 @@ function format(rate: number) { const PERIMETER = 2 * Math.PI const BEGIN_ANGLE = -Math.PI / 2 const STEP = 1 -let CIRCLE_INDEX = 0 export function Circle(props: CircleProps) { - const [state, setState] = useState({ - ready: false, - hoverColor: '', - unitag: '', - }) + const indexRef = useRef( + `van-circle_uni_${+new Date()}${Math.ceil(Math.random() * 10000)}`, + ) + const [ready, setReady] = useState(false) - const ref: any = useRef({ + const ref = useRef({ + ctx: undefined, inited: false, currentValue: undefined, interval: undefined, + hoverColor: '', }) const { @@ -42,8 +35,6 @@ export function Circle(props: CircleProps) { fill, layerColor = '#ffffff', color = '#1989fa', - // eslint-disable-next-line @typescript-eslint/no-unused-vars - type = '', strokeWidth = 4, clockwise = true, style, @@ -53,95 +44,63 @@ export function Circle(props: CircleProps) { } = props useEffect(() => { - setState((state) => { - return { - ...state, - // unitag: process.env.TARO_ENV === 'h5' ? `van-circle_uni_${CIRCLE_INDEX++}` : 'van-circle', - unitag: `van-circle_uni_${CIRCLE_INDEX++}`, - } - }) - }, []) - - useEffect(() => { - setState((state) => { - return { - ...state, - ready: true, - } - }) - }, []) - - useEffect(() => { + Current.page = Current.page ?? { path: `page-${indexRef.current}` } setTimeout(() => { - if (process.env.TARO_ENV === 'h5') { - setState((state) => { - return { - ...state, - ready: true, - } - }) + if ( + process.env.TARO_ENV !== 'h5' && + process.env.TARO_ENV !== 'swan' && + process.env.TARO_ENV !== 'kwai' + ) { + const query = createSelectorQuery() + query + .select(`#${indexRef.current}`) + .fields({ node: true, size: true }) + .exec((res) => { + const canvas = res[0].node + const ctx = canvas.getContext('2d') + canvas.width = res[0].width * 3 + canvas.height = res[0].height * 3 + ctx.scale(3, 3) + ref.current.ctx = ctx + setReady(true) + }) + } else { + const ctx = createCanvasContext(indexRef.current) + ref.current.ctx = ctx + setReady(true) } }, 100) - // eslint-disable-next-line react-hooks/exhaustive-deps }, []) - const getContext = useCallback(() => { - Current.page = Current.page ?? { path: `page-${state.unitag}` } - let ctx: any = null - try { - ctx = createCanvasContext(state.unitag) - } catch (error) {} - - return Promise.resolve(ctx) - // const dpr = getSystemInfoSync().pixelRatio - // return new Promise((resolve: any) => { - // createSelectorQuery() - // .select(`.${state.unitag}`) - // .node() - // .exec((res: any) => { - // const canvas = res[0].node - // if (canvas) { - // const ctx = canvas.getContext(type) - // if (!ref.current.inited) { - // ref.current.inited = true - // canvas.width = size * dpr - // canvas.height = size * dpr - // ctx.scale(dpr, dpr) - // } - // resolve(adaptor(ctx)) - // } - // }) - // }) - }, [state.unitag]) - const setHoverColor = function () { if (isObj(color)) { const _color = color as Record - return getContext() - .then((context: any) => { - if (context) { - const LinearColor = context.createLinearGradient(size, 0, 0, 0) - Object.keys(color) - .sort((a, b) => parseFloat(a) - parseFloat(b)) - .map((key: any) => - LinearColor.addColorStop(parseFloat(key) / 100, _color[key]), - ) - setState((state) => { - return { - ...state, - hoverColor: LinearColor, - } - }) - } - }) - .catch(() => {}) - } - setState((state: any) => { - return { - ...state, - hoverColor: color, + try { + // 快手不支持渐变色 + if (process.env.TARO_ENV === 'kwai') { + Object.keys(color) + .sort((a, b) => parseFloat(a) - parseFloat(b)) + .map((key: any) => (ref.current.hoverColor = _color[key])) + } else { + const LinearColor = ref.current.ctx.createLinearGradient( + size, + 0, + 0, + 0, + ) + Object.keys(color) + .sort((a, b) => parseFloat(a) - parseFloat(b)) + .map((key: any) => + LinearColor.addColorStop(parseFloat(key) / 100, _color[key]), + ) + ref.current.hoverColor = LinearColor + } + } catch (error) { + console.error(error) } - }) + } else { + ref.current.hoverColor = color + } return Promise.resolve() } const presetCanvas = useCallback( @@ -154,14 +113,24 @@ export function Circle(props: CircleProps) { ) => { const position = size / 2 const radius = position - strokeWidth / 2 - context.setStrokeStyle(strokeStyle) - context.setLineWidth(strokeWidth) - context.setLineCap(lineCap) + if (process.env.TARO_ENV === 'swan') { + context.setStrokeStyle(strokeStyle) + context.setLineWidth(strokeWidth) + context.setLineCap(lineCap) + } else { + context.strokeStyle = strokeStyle + context.lineWidth = strokeWidth + context.lineCap = lineCap + } context.beginPath() context.arc(position, position, radius, beginAngle, endAngle, !clockwise) context.stroke() if (fill) { - context.setFillStyle(fill) + if (process.env.TARO_ENV === 'swan') { + context.setFillStyle(fill) + } else { + context.fillStyle = fill + } context.fill() } }, @@ -180,27 +149,27 @@ export function Circle(props: CircleProps) { const endAngle = clockwise ? BEGIN_ANGLE + progress : 3 * Math.PI - (BEGIN_ANGLE + progress) - presetCanvas(context, state.hoverColor, BEGIN_ANGLE, endAngle) + presetCanvas(context, ref.current.hoverColor, BEGIN_ANGLE, endAngle) }, - [clockwise, presetCanvas, state.hoverColor], + [clockwise, presetCanvas], ) const drawCircle = useCallback( (currentValue: any) => { - getContext() - .then((context: any) => { - if (context) { - context.clearRect(0, 0, size, size) - renderLayerCircle(context) - const formatValue = format(currentValue) - if (formatValue !== 0) { - renderHoverCircle(context, formatValue) - } - context.draw().catch(() => {}) - } - }) - .catch(() => {}) + ref.current.ctx.clearRect(0, 0, size, size) + renderLayerCircle(ref.current.ctx) + const formatValue = format(currentValue) + if (formatValue !== 0) { + renderHoverCircle(ref.current.ctx, formatValue) + } + if ( + process.env.TARO_ENV === 'h5' || + process.env.TARO_ENV === 'swan' || + process.env.TARO_ENV === 'kwai' + ) { + ref.current.ctx.draw() + } }, - [getContext, renderHoverCircle, renderLayerCircle, size], + [renderHoverCircle, renderLayerCircle, size], ) const clearMockInterval = function () { if (ref.current.interval) { @@ -236,20 +205,20 @@ export function Circle(props: CircleProps) { }, [drawCircle, speed, value]) useEffect(() => { - if (state.ready) { + if (ready) { reRender() } - }, [reRender, state.ready, value]) + }, [reRender, value, ready]) useEffect(() => { - if (state.ready && state.unitag) { + if (ready) { drawCircle(ref.current.currentValue) } // eslint-disable-next-line - }, [state.ready, size, state.unitag]) + }, [size, ready]) useEffect(() => { - if (state.ready && state.unitag) { + if (ready) { setHoverColor() .then(() => { drawCircle(ref.current.currentValue) @@ -257,18 +226,17 @@ export function Circle(props: CircleProps) { .catch(() => {}) } // eslint-disable-next-line - }, [state.ready, color, state.unitag]) + }, [color, ready]) useEffect(() => { return () => { clearMockInterval() } /* eslint-disable-next-line */ - }, [state.ready]) - + }, []) return ( {!text ? ( {children} - ) : process.env.TARO_ENV === 'dd' ? ( - {text} ) : ( - {text} + {text} )} ) diff --git a/packages/vantui/src/style/var.less b/packages/vantui/src/style/var.less index 13edc094d..c7bd018ba 100644 --- a/packages/vantui/src/style/var.less +++ b/packages/vantui/src/style/var.less @@ -714,8 +714,8 @@ @skeleton-animation-duration: 1.2s; .theme(@property, @imp) { - @{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig')); - @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig')); + @{property}: e(replace(@imp, '([-]@)([^() ]+)', '$1{$2}', 'ig')); + @{property}: e(replace(@imp, '([-]@)([^() ]+)', 'var(--$2, $1{$2})', 'ig')); } // number-keyboard diff --git a/packages/vantui/types/circle.d.ts b/packages/vantui/types/circle.d.ts index 28c658306..95e505f5d 100644 --- a/packages/vantui/types/circle.d.ts +++ b/packages/vantui/types/circle.d.ts @@ -10,7 +10,6 @@ export interface CircleProps extends StandardProps { fill?: string layerColor?: string color?: string | Record - type?: string strokeWidth?: number clockwise?: boolean children?: ReactNode