<script lang="tsx" setup>
import { stringToBase64 } from '
./utils/index';
import { ref, watchEffect } from 'vue';
import { renderToString } from '@vue/server-renderer';
interface IProps {
defaultDurTime?
: number; //进度条完结时间
progress?
: number; //当前进度0-100
color?
: object | string; //进度条颜色，传入对象格式可以定义渐变色
width?
: number; //矩形宽度
height?
: number; //矩形高度
radian?
: number; //矩形圆角弧度
layerColor?
: string; //轨道颜色
fill?
: string; //填充颜色
strokeWidth?
: number; //线条宽度
strokeLinecap?
: string; //进度条端点(butt,round,square)
}
const props = withDefaults(defineProps<IProps>(), {
defaultDurTime
: 1000, //进度条完结时间
progress
: 50,
color
: () => {
return { '0'
: '#80EDFF', '100'
: '#4A7DFF' };
},
width
: 140,
height
: 120,
radian
: 20,
layerColor: '#e0e0e0',
fill
: 'none',
strokeWidth
: 10,
strokeLinecap
: 'round',
});
const progressOffset = ref(0);
const allLen = ref(0);
const strokeBgColor = ref<string | object>('#666666');
let dataURL = ref('');
async function handleSave() {
const html = await renderToString(renderTitle());
dataURL
.value = stringToBase64(html);
console
.log(dataURL);
}
const renderTitle = () =>
return (
<svg
width={props
.width + props
.strokeWidth}
height={props
.height + props
.strokeWidth}
xmlns="http
://www
.w3
.org/2000/svg"
>
{Object
.prototype
.toString
.call(props
.color) === '[object Object]' && (
<defs>
<linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="0%">
{Object
.keys(props
.color)
.map((key) => (
<stop offset={`${key}%`} stop-color={props
.color[key]} key={key}></stop>
))}
</linearGradient>
</defs>
)}
<rect
x={0
.5 * props
.strokeWidth}
y={0
.5 * props
.strokeWidth}
rx={props
.radian}
ry={props
.radian}
width={props
.width}
height={props
.height}
style={{ strokeWidth
: props
.strokeWidth, fill
: props
.fill, stroke
: props
.layerColor }}
/>
{props
.progress !== 0 && (
<rect
x={0
.5 * props
.strokeWidth}
y={0
.5 * props
.strokeWidth}
rx={props
.radian}
ry={props
.radian}
width={props
.width}
height={props
.height}
style={{
strokeDashoffset
: progressOffset
.value,
strokeDasharray
: allLen
.value,
strokeWidth
: props
.strokeWidth,
fill
: props
.fill,
stroke
: strokeBgColor
.value,
strokeLinecap
: props
.strokeLinecap,
}}
>
<animate
attributeName="stroke-dashoffset"
dur={`${props
.defaultDurTime}ms`}
fill="freeze"
from={allLen
.value}
to={progressOffset
.value}
></animate>
</rect>
)}
</svg>
);
};
watchEffect(() => {
allLen
.value = (props
.width + props
.height) * 2 - props
.radian * 8 + 2 * props
.radian * Math
.PI;
if (props
.strokeLinecap !== 'butt' && props
.progress !== 100 && props
.progress > 95) {
progressOffset
.value
allLen
.value - (props
.progress / 100) * allLen
.value + props
.strokeWidth;
} else {
progressOffset
.value = allLen
.value - (props
.progress / 100) * allLen
.value;
}
if (Object
.prototype
.toString
.call(props
.color) === '[object Object]') {
strokeBgColor
.value = `url(#progressGradient)`;
} else {
strokeBgColor
.value = props
.color;
}
handleSave();
});
</script>
把这段代码使用vue3实现
本文介绍如何使用 Cocos2d-x 的 LayerColor 类创建一个指定颜色的图层，并将其添加到当前层级中。通过示例代码展示了具体的实现方式。
扫一扫
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
