57 lines
2.5 KiB
JavaScript
57 lines
2.5 KiB
JavaScript
(function(){
|
|
// 注册元宝形状渲染函数 使用 SVG 路径或贝塞尔曲线近似
|
|
window.YooneSnowShapeRenderers = window.YooneSnowShapeRenderers || {};
|
|
const outerPath = (typeof Path2D !== 'undefined') ? new Path2D('M947.4 326.8l0.4-0.1H804.2C814 346 819 364.4 819 381.5c0 18.6-6 46.5-34.3 73.8-17.4 16.7-41.1 31.2-70.5 43.2-54.7 22.1-126.5 34.4-202.3 34.4s-147.6-12.2-202.3-34.4c-29.4-12-53.1-26.5-70.5-43.2-28.3-27.2-34.3-55.2-34.3-73.8 0-17.2 4.9-35.5 14.4-54.8h-150c-29.3 0-53.1 27.1-53.1 60.6C46 634.4 256.5 826 511.7 826c258.1 0 470.3-195.7 496.4-447-0.7-29-27.6-52.2-60.7-52.2z') : null;
|
|
const topPath = (typeof Path2D !== 'undefined') ? new Path2D('M512 488.4c144.7 0 262.7-47.4 262.7-107.1 0-57.7-118-183.2-262.7-183.2S249.3 321.7 249.3 381.4c0 59.7 118 107 262.7 107z') : null;
|
|
window.YooneSnowShapeRenderers.yuanbao = function(context, positionX, positionY, baseSize){
|
|
// 函数用于绘制元宝形状 根据基础尺寸进行缩放
|
|
if (outerPath && topPath){
|
|
// 条件判断 如果支持 Path2D 则使用 SVG 路径绘制
|
|
context.save();
|
|
context.translate(positionX, positionY);
|
|
const scaleFactor = (baseSize * 4.2) / 512;
|
|
context.scale(scaleFactor, scaleFactor);
|
|
context.translate(-512, -512);
|
|
context.fillStyle = '#FFC003';
|
|
context.fill(outerPath);
|
|
context.fill(topPath);
|
|
context.restore();
|
|
return;
|
|
}
|
|
// 回退方案 使用贝塞尔曲线近似绘制元宝
|
|
context.save();
|
|
context.translate(positionX, positionY);
|
|
context.fillStyle = '#FFC003';
|
|
const totalWidth = baseSize * 2.6 * 1.4; // 调整比例保证大小一致
|
|
const halfWidth = totalWidth / 2;
|
|
const upperHeight = baseSize * 1.1 * 1.4;
|
|
const lowerHeight = baseSize * 0.85 * 1.4;
|
|
const rimLift = upperHeight * 0.25;
|
|
context.beginPath();
|
|
context.moveTo(-halfWidth, -rimLift);
|
|
context.bezierCurveTo(
|
|
-halfWidth * 0.65, -upperHeight * 1.0,
|
|
-halfWidth * 0.25, -upperHeight * 1.25,
|
|
0, -upperHeight
|
|
);
|
|
context.bezierCurveTo(
|
|
halfWidth * 0.25, -upperHeight * 1.25,
|
|
halfWidth * 0.65, -upperHeight * 1.0,
|
|
halfWidth, -rimLift
|
|
);
|
|
context.bezierCurveTo(
|
|
halfWidth * 0.65, lowerHeight * 0.95,
|
|
halfWidth * 0.25, lowerHeight * 1.1,
|
|
0, lowerHeight
|
|
);
|
|
context.bezierCurveTo(
|
|
-halfWidth * 0.25, lowerHeight * 1.1,
|
|
-halfWidth * 0.65, lowerHeight * 0.95,
|
|
-halfWidth, -rimLift
|
|
);
|
|
context.closePath();
|
|
context.fill();
|
|
context.restore();
|
|
};
|
|
})();
|