Description
Version
latest
Link to Minimal Reproduction
null
Steps to Reproduce
// 注册所有需要的内容
VStory.registerAll();
const rect = {
graphic: {
stroke: false,
fill: 'pink'
},
text: {
text: '这是一个矩形',
textBaseline: 'middle',
textAlign: 'center',
fill: 'white'
}
};
const text = {
graphic: {
text: '这是一个文本',
fontSize: 12,
fontWeight: 'bold',
fill: 'red',
textAlign: 'left',
textBaseline: 'top'
},
panel: {
fill: 'blue',
cornerRadius: 30
}
};
const image = {
rotate: 45,
angle: 45,
graphic: {
rotate: 45,
angle: 45,
stroke: false,
image:
'data:image/png;base64,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'
}
};
const shape = {
graphic: {
stroke: 'red',
symbolType: 'star'
}
};
const arc = {
graphic: {
innerRadius: 20,
startAngle: 0,
endAngle: Math.PI * 2,
fill: 'orange'
}
};
const polygon = {
graphic: {
points: [
{ x: 50 + (200 / (2 * Math.sqrt(3))) * Math.cos(0), y: 50 + (200 / (2 * Math.sqrt(3))) * Math.sin(0) },
{
x: 50 + (200 / (2 * Math.sqrt(3))) * Math.cos(Math.PI / 3),
y: 50 + (200 / (2 * Math.sqrt(3))) * Math.sin(Math.PI / 3)
},
{
x: 50 + (200 / (2 * Math.sqrt(3))) * Math.cos((2 * Math.PI) / 3),
y: 50 + (200 / (2 * Math.sqrt(3))) * Math.sin((2 * Math.PI) / 3)
},
{
x: 50 + (200 / (2 * Math.sqrt(3))) * Math.cos(Math.PI),
y: 50 + (200 / (2 * Math.sqrt(3))) * Math.sin(Math.PI)
},
{
x: 50 + (200 / (2 * Math.sqrt(3))) * Math.cos((4 * Math.PI) / 3),
y: 50 + (200 / (2 * Math.sqrt(3))) * Math.sin((4 * Math.PI) / 3)
},
{
x: 50 + (200 / (2 * Math.sqrt(3))) * Math.cos((5 * Math.PI) / 3),
y: 50 + (200 / (2 * Math.sqrt(3))) * Math.sin((5 * Math.PI) / 3)
}
],
fill: {
gradient: 'linear',
x0: 0,
y0: 0,
x1: 1,
y1: 0,
stops: [
{ offset: 0, color: 'green' },
{ offset: 0.5, color: 'orange' },
{ offset: 1, color: 'red' }
]
}
}
};
const characterList = [
{ type: 'Rect', options: rect, effect: 'scale' },
{ type: 'Text', options: text, effect: 'typewriter' },
{ type: 'Image', options: image, effect: 'wipe', angle: 45 },
{ type: 'Shape', options: shape, effect: 'clipRange' },
{ type: 'Polygon', options: polygon, effect: 'fade' },
{ type: 'Arc', options: arc, effect: 'growAngle' }
];
const story = new VStory.Story(null, {
dom: CONTAINER_ID,
width: 500,
height: 400,
scaleX: 'auto',
scaleY: 'auto',
background: '#ebecf0'
});
const player = new VStory.Player(story);
story.init(player);
characterList.forEach((item, index) => {
story.addCharacter(
{
type: item.type,
id: item.type,
zIndex: 1,
position: {
top: 50 + Math.floor(index / 3) * 150,
left: 50 + Math.floor(index % 3) * 150,
width: 100,
height: 100
},
options: item.options
},
{
sceneId: 'defaultScene',
actions: [
{
action: 'appear',
startTime: 1000 * index,
payload: [
{
animation: {
duration: 1000,
easing: 'linear',
// effect: item.effect
}
}
]
}
]
}
);
});
player.play(1);
window['story'] = story;
window['vstory'] = story;
Current Behavior
没有旋转
Expected Behavior
可以旋转
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response