<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Konva绘制圆环旋转动画</title>
<script src="https://cdn.rawgit.com/konvajs/konva/0.9.5/konva.min.js"></script>
<script src="./CircleText.js"></script>
</head>
<body>
<div id="container">
</div>
<script>
const data1 = [{ name: '乡村振兴局示范建设领导小组' }, { name: '区作物栽培技术指导站' }, { name: '区农林综合执法大队' }, { name: '区农机排灌站' }, { name: '区水产技术指导站' }, { name: '区农业机械技术学校' }, { name: '区耕地质量与农业环境保护站' }, { name: '区畜牧兽医站' }, { name: '区桑蚕指导站' }, { name: '区植物保护站' }, { name: '农村产权交易中心' }, { name: '农业项目建设监督评价科' }, { name: '安全生产科' }];
var sceneWidth = 1000;
var sceneHeight = 1000;
const textColor = '#3A8649';
const circleColor = '#F6F9F6'
//创建舞台
var stage = new Konva.Stage({
container: 'container',
// first just set set as is
width: sceneWidth,
height: sceneHeight,
});
//中心点坐标
var cenX = stage.width() / 2;
var cenY = stage.height() / 2;
//创建1环的组
var Group1 = new Konva.Group({
x: cenX,//组内的 x，y坐标。
y: cenY
});
//创建2环的组
var Group2 = new Konva.Group({
x: cenX,//组内的 x，y坐标。
y: cenY
});
//刻度圆组
const Group3 = new Konva.Group({
x: 0,
y: 0
})
//创建背景层
const bgLayer = new Konva.Layer();
stage.add(bgLayer);
//绘制背景
var innerRadius = 250;//内环的半径
var outerRadius = 400;//外环的半径
const kRadius = 150;//刻度圆半径
//创建背景的外环的虚线圆
var outercircle = new Konva.Circle({
x: cenX,
y: cenY,
radius: outerRadius,
stroke: textColor, //注意是stroke 不是strokeStyle
strokeWidth: 3,
});
//创建内园
const innerCircle = new Konva.Circle({
x: cenX,
y: cenY,
radius: innerRadius,
stroke: circleColor, //注意是stroke 不是strokeStyle
strokeWidth: 100,
});
//创建刻度圆
let number = 60;
let lineangle = 0
for (let i = 1; i <= 60; i++) {
lineangle += 360 / 60;
const x = kRadius * Math.cos(lineangle * Math.PI / 180);
const y = kRadius * Math.sin(lineangle * Math.PI / 180);
const x1 = (kRadius - 30) * Math.cos(lineangle * Math.PI / 180);
const y1 = (kRadius - 30) * Math.sin(lineangle * Math.PI / 180);
var line = new Konva.Line({
x: cenX,
y: cenY,
points: [x1, y1, x, y],
stroke: textColor,
tension: 1
});
Group3.add(line)
}
//渐变圆
//创建内园
const linerCricle = new Konva.Circle({
x: cenX,
y: cenY,
radius: innerRadius - 150,
fill: circleColor,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndRadius: innerRadius - 150,
fillPriority: "radial-gradient",
fillRadialGradientColorStops: [0, '#479A57', 1, textColor]
});
//把外虚线圆，添加到层中。
bgLayer.add(linerCricle);
bgLayer.add(outercircle);
bgLayer.add(innerCircle)
bgLayer.draw();//渲染层
//动画层的绘制
var animateLayer = new Konva.Layer();
stage.add(animateLayer);
// animateLayer.add(kCircle);
let angle = 0;
//创建文字
for (let i = 0; i <= data1.length - 1; i++) {
angle += 360 / data1.length;
const name = data1[i].name;
//外圈小园
const smallCircle = new Konva.Circle({
x: outerRadius * Math.cos(angle * Math.PI / 180),
y: outerRadius * Math.sin(angle * Math.PI / 180),
radius: 10,
stroke: textColor, //注意是stroke 不是strokeStyle
strokeWidth: 3,
});
//外圈文字
const tx = (outerRadius - 50) * Math.cos(angle * Math.PI / 180);
const ty = (outerRadius - 50) * Math.sin(angle * Math.PI / 180);
var text = new Konva.Text({
x: tx,
y: ty,
width: 80, //文字的宽度
fill: textColor, //文字的颜色
text: name, //文字的内容
offsetX: 40,
fontStyle: 'bold', //字体加粗
align: 'left'
});
//内圈文字
const tx1 = innerRadius * Math.cos(angle * Math.PI / 180);
const ty1 = innerRadius * Math.sin(angle * Math.PI / 180);
const text1 = new Konva.Text({
x: tx1,
y: ty1,
width: 80, //文字的宽度
fill: textColor, //文字的颜色
text: name, //文字的内容
offsetX: 30,
fontStyle: 'bold', //字体加粗
align: 'left'
});
console.log(text1);
Group1.add(smallCircle)
Group1.add(text);
Group2.add(text1)
}
animateLayer.add(Group1);//第二层的组添加到层上
animateLayer.add(Group2);//第二层的组添加到层上
animateLayer.add(Group3)
animateLayer.draw();
var rotateAnglPerSecond = 30;////每秒钟设置旋转60
//Konva帧动画系统
var animate = new Konva.Animation(
function (frame) {
//每隔一会执行此方法，类似 setInterval
//timeDiff: 两帧之间时间差。是变化的，根据电脑性能和浏览器的状态动态变化。
//计算 当前帧需要旋转的角度。
var rotateAngle = rotateAnglPerSecond * frame.timeDiff / 1000;//上一帧到当前帧的时间差 毫秒
Group1.rotate(rotateAngle);// 不是弧度，是角度
Group2.rotate(-rotateAngle);// 不是弧度，是角度
// Group3.rotate(rotateAngle);// 不是弧度，是角度
//获得二环上圆的内部组进行反向旋转
Group1.getChildren().each(function (item, index) {
item.rotate(-rotateAngle);
});
//获得二环上圆的内部组进行反向旋转
Group2.getChildren().each(function (item, index) {
item.rotate(rotateAngle);
});
//获得二环上圆的内部组进行反向旋转
Group3.getChildren().each(function (item, index) {
item.rotate(rotateAngle);
});
}, animateLayer);
animate.start();//启动动画
//Konva 事件系统
//给动画层绑定一个鼠标移上去的事件
bgLayer.on('mouseover', function () {
//设置旋转角度
rotateAnglPerSecond = 0;//设置旋转的角度为10度，旋转变慢。
});
//给动画层绑定 mouseout离开的事件。
bgLayer.on('mouseout', function () {
//当鼠标移开的时候，旋转加快
rotateAnglPerSecond = 30;//设置旋转角度为60度，旋转变快
});
animateLayer.on('mouseover', function () {
//设置旋转角度
rotateAnglPerSecond = 0;//设置旋转的角度为10度，旋转变慢。
});
//给动画层绑定 mouseout离开的事件。
animateLayer.on('mouseout', function () {
//当鼠标移开的时候，旋转加快
rotateAnglPerSecond = 30;//设置旋转角度为60度，旋转变快
});
</script>
</body>
</html>
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接