ray-js/circle-progress 包组件表现异常？

[幽冥墨]

还是没有复现，请提供下完整最小可复现代码和操作步骤以及问题截图

可复现代码就是以上代码；
操作步骤：清空缓存再重新进入，不做任何操作就会出现问题；
问题截图：如图所示，自定义的中间背景色会发生右下偏移遮盖住右下滑倒，但是滑道又可以正常操作

[crisiron]

可以打包个代码附件上传下么？样式没有提供不知道是不是跟样式有关

[幽冥墨]

可以打包个代码附件上传下么？样式没有提供不知道是不是跟样式有关

这个里面的使用与样式定义已经都给出，请帮忙查看一下

[幽冥墨]

可以打包个代码附件上传下么？样式没有提供不知道是不是跟样式有关

这个里面的使用与样式定义已经都给出，请帮忙查看一下

请问能定位出问题吗？
在折叠机上测试，在折叠情况下滑道统一是向右下偏移，在展开情况下会出现滑道放大内部元素不变或滑道放大到全屏不方便操作

[crisiron]

在定位中

[crisiron]

大概知道原因了，组件内部使用的单位是 px, 不是rpx 如果使用 rpx 就会导致大小与 progress 大小产生差异，两个方案：1.内部圆环使用px 2. 可以先自行处理下 rpx <=> px; 转换代码：

Code: Select all

import { getSystemInfoSync, platform } from '@ray-js/ray';
const systemInfo = getSystemInfoSync();
export const rpx2pxNum = (maybeRpx: string | number) => {
  if (typeof maybeRpx === 'string') {
    if (maybeRpx.endsWith('rpx')) {
      const value = Number(maybeRpx.replace(/rpx/g, ''));
      if (platform.isMiniProgram) {
        return (value / 750) * systemInfo.windowWidth;
      }
      if (platform.isWeb) {
        return value / 2;
      }
    } else if (maybeRpx.endsWith('px')) {
      const value = Number(maybeRpx.replace(/px/g, ''));
      return Number(value);
    }
  } else {
    if (platform.isMiniProgram) {
      return (maybeRpx / 750) * systemInfo.windowWidth;
    }
    if (platform.isWeb) {
      return maybeRpx / 2;
    }
  }
  return Number(maybeRpx);
};

export const px2rpxNum = (maybeRpx: string | number) => {
  if (typeof maybeRpx === 'string') {
    if (maybeRpx.endsWith('rpx')) {
      const value = Number(maybeRpx.replace(/rpx/g, ''));
      return value;
    }
    if (maybeRpx.endsWith('px')) {
      const value = Number(maybeRpx.replace(/px/g, ''));
      if (platform.isMiniProgram) {
        return (value * 750) / systemInfo.windowWidth;
      }
      if (platform.isWeb) {
        return value * 2;
      }
    }
  }
  if (platform.isMiniProgram) {
    return (Number(maybeRpx) * 750) / systemInfo.windowWidth;
  }
  if (platform.isWeb) {
    return Number(maybeRpx) * 2;
  }
  return Number(maybeRpx);
};

[幽冥墨]

大概知道原因了，组件内部使用的单位是 px, 不是rpx 如果使用 rpx 就会导致大小与 progress 大小产生差异，两个方案：1.内部圆环使用px 2. 可以先自行处理下 rpx <=> px; 转换代码：

Code: Select all

import { getSystemInfoSync, platform } from '@ray-js/ray';
const systemInfo = getSystemInfoSync();
export const rpx2pxNum = (maybeRpx: string | number) => {
  if (typeof maybeRpx === 'string') {
    if (maybeRpx.endsWith('rpx')) {
      const value = Number(maybeRpx.replace(/rpx/g, ''));
      if (platform.isMiniProgram) {
        return (value / 750) * systemInfo.windowWidth;
      }
      if (platform.isWeb) {
        return value / 2;
      }
    } else if (maybeRpx.endsWith('px')) {
      const value = Number(maybeRpx.replace(/px/g, ''));
      return Number(value);
    }
  } else {
    if (platform.isMiniProgram) {
      return (maybeRpx / 750) * systemInfo.windowWidth;
    }
    if (platform.isWeb) {
      return maybeRpx / 2;
    }
  }
  return Number(maybeRpx);
};

export const px2rpxNum = (maybeRpx: string | number) => {
  if (typeof maybeRpx === 'string') {
    if (maybeRpx.endsWith('rpx')) {
      const value = Number(maybeRpx.replace(/rpx/g, ''));
      return value;
    }
    if (maybeRpx.endsWith('px')) {
      const value = Number(maybeRpx.replace(/px/g, ''));
      if (platform.isMiniProgram) {
        return (value * 750) / systemInfo.windowWidth;
      }
      if (platform.isWeb) {
        return value * 2;
      }
    }
  }
  if (platform.isMiniProgram) {
    return (Number(maybeRpx) * 750) / systemInfo.windowWidth;
  }
  if (platform.isWeb) {
    return Number(maybeRpx) * 2;
  }
  return Number(maybeRpx);
};

目前第二种方式有效。
第一种方式在 iOS 与 Android 上表现不一致

[幽冥墨]

大概知道原因了，组件内部使用的单位是 px, 不是rpx 如果使用 rpx 就会导致大小与 progress 大小产生差异，两个方案：1.内部圆环使用px 2. 可以先自行处理下 rpx <=> px; 转换代码：

Code: Select all

import { getSystemInfoSync, platform } from '@ray-js/ray';
const systemInfo = getSystemInfoSync();
export const rpx2pxNum = (maybeRpx: string | number) => {
  if (typeof maybeRpx === 'string') {
    if (maybeRpx.endsWith('rpx')) {
      const value = Number(maybeRpx.replace(/rpx/g, ''));
      if (platform.isMiniProgram) {
        return (value / 750) * systemInfo.windowWidth;
      }
      if (platform.isWeb) {
        return value / 2;
      }
    } else if (maybeRpx.endsWith('px')) {
      const value = Number(maybeRpx.replace(/px/g, ''));
      return Number(value);
    }
  } else {
    if (platform.isMiniProgram) {
      return (maybeRpx / 750) * systemInfo.windowWidth;
    }
    if (platform.isWeb) {
      return maybeRpx / 2;
    }
  }
  return Number(maybeRpx);
};

export const px2rpxNum = (maybeRpx: string | number) => {
  if (typeof maybeRpx === 'string') {
    if (maybeRpx.endsWith('rpx')) {
      const value = Number(maybeRpx.replace(/rpx/g, ''));
      return value;
    }
    if (maybeRpx.endsWith('px')) {
      const value = Number(maybeRpx.replace(/px/g, ''));
      if (platform.isMiniProgram) {
        return (value * 750) / systemInfo.windowWidth;
      }
      if (platform.isWeb) {
        return value * 2;
      }
    }
  }
  if (platform.isMiniProgram) {
    return (Number(maybeRpx) * 750) / systemInfo.windowWidth;
  }
  if (platform.isWeb) {
    return Number(maybeRpx) * 2;
  }
  return Number(maybeRpx);
};

目前第二种方式有效。
第一种方式在 iOS 与 Android 上表现不一致

0.1.4 版本这个问题解决了吗