如何为Mojs的Shape模块（非Html模块）设置单角自定义圆角

方案1：CSS样式覆盖（实现最简单） #

• 给Shape实例添加自定义类名，通过CSS给内部生成的SVG rect元素单独指定对应角的圆角属性，现代浏览器均支持SVG元素应用border-radius样式
  示例代码：

// Mojs 配置
const customRect = new mojs.Shape({
  shape: 'rect',
  className: 'partial-radius-rect',
  rx: 0, // 先重置统一圆角配置
  // 其余宽高、位置、动画等配置正常书写
})

/* 样式文件 */
.partial-radius-rect rect {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

方案2：自定义Path路径（兼容性最好） #

• 直接将Shape的渲染类型指定为path，手动编写仅保留指定位置圆角的路径代码，完全依托Mojs原生渲染能力，无需额外依赖，兼容所有支持SVG的浏览器
  示例代码：

// 可封装为工具函数动态生成不同尺寸、不同圆角位置的路径
const rectWidth = 200, rectHeight = 100, cornerRadius = 10;
const customPath = `
  M ${cornerRadius} 0
  H ${rectWidth}
  V ${rectHeight - cornerRadius}
  Q ${rectWidth} ${rectHeight} ${rectWidth - cornerRadius} ${rectHeight}
  H 0
  V ${cornerRadius}
  Q 0 0 ${cornerRadius} 0
  Z
`;

const customRect = new mojs.Shape({
  shape: 'path',
  path: customPath,
  // 其余宽高、位置、动画等配置正常书写
})

方案3：onDraw钩子内修改元素（逻辑最内聚） #

• 利用Mojs Shape提供的onDraw生命周期钩子，直接在渲染时修改生成的DOM元素样式，无需额外样式文件
  示例代码：

const customRect = new mojs.Shape({
  shape: 'rect',
  rx: 0,
  onDraw: (el) => {
    const innerRect = el.querySelector('rect');
    innerRect.style.borderTopLeftRadius = '10px';
    innerRect.style.borderBottomRightRadius = '10px';
  },
  // 其余宽高、位置、动画等配置正常书写
})

• 三种方案均不需要引入Html模块，完全基于Shape模块原生能力实现
• 自定义路径方案如果需要适配动态尺寸，只需修改路径生成的变量参数即可快速复用
• CSS方案如果出现样式不生效的情况，可以适当提升选择器优先级，或添加!important强制覆盖inline样式

内容的提问来源于stack exchange，提问作者Rehan