konvajs -基础图形-标签-箭头，动画，学习笔记

官网：

Konva 框架概述 |Konva - JavaScript 2d 画布图书馆 (konvajs.org)https://konvajs.org/docs/overview.html

konva是canvas的一个库，可快速画出想要的图形。

基础创建步骤：

// 第一步，创建一个Stage舞台
var stage = new Konva.Stage({container: 'container',   // id of container <div>width: 500,height: 500
});// 第二步，创建一个layer图层
var layer = new Konva.Layer();//第三步，创建图形
var circle = new Konva.Circle({x: stage.width() / 2,y: stage.height() / 2,radius: 70,fill: 'red',stroke: 'black',strokeWidth: 4
});// 第四步，添加到图层中
layer.add(circle);// 第五步，图层添加到舞台中
stage.add(layer);// draw the image
layer.draw();

画基础图形：（vue3项目）

<template><div class="rect"><div id="canvas"></div></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import Konva from 'konva'onMounted(()=>{init()
})
const init=()=>{
const el=document.getElementById("canvas")if(!el){return}const {clientWidth,clientHeight}=el//1创建一个stage平台const stage=new Konva.Stage({
container:'canvas',width:clientWidth,height:clientHeight,})//2创建一个layer图层const layer=new Konva.Layer()//矩形//   const width =400
//   const height=200
//   const x=clientWidth/2-width/2
//   const y=clientHeight/2-height/2
//   const rect=new Konva.Rect({
//     x:x,
//     y:y,
//     width:width,
//     height:height,
//     fill:'#ff8800',
//     stroke:'black',
//     strokeWidth:1
//   })
// layer.add(rect)
//   //圆
//   const circle=new Konva.Circle({
//     x:clientWidth/2,
//     y:clientHeight/2,
//     radius:100,
//     fill:'#ff8800',
//     stroke:"#000000",
//     strokeWidth:1,
//     draggable:true,
//   })
//   layer.add(circle)
//   //椭圆
//   const ellipse=new Konva.Ellipse({
//     x:100,
//     y:100,
//     radiusX:200,
//     radiusY:100,
//     fill:"red",
//     stroke:"black",
//     strokeWidth:1,
//     draggable:true,
//   })
//   layer.add(ellipse)
//   //扇形
//   const wedge=new Konva.Wedge({
//     x:200,
//     y:300,
//
//     radius: 150, // 使用 radius 而不是 radiusX 和 radiusY
//     angle: 45,   // 定义扇形的角度
//     fill:"#ff0000",
//     stroke:"black",
//     strokeWidth:1,
//     draggable:true,
//     rotation:60
//   })
//   layer.add(wedge)
//线，曲线，闭合
//   const  line= new Konva.Line({
//     points:[100,100,200,300,500,500],//[x1,y1,x2,y2,x3,y3....]
//     stroke:'red',
//     strokeWidth:2,
//     //设置闭合
//     closed:true,
//     fill:"red",
//     //设置曲线，
//     tension:0.5//值越大，拉伸越大
//
//   })
//   layer.add(line)//文本五角心const text=new Konva.Text({x:0,y:clientHeight/2,text:"ni好niHao",fontSize:40,fill:"black"})text.x(clientWidth/2-text.width()/2)layer.add(text)const star=new Konva.Star({x:clientWidth/2,y:clientHeight/2-100,numPoints:5,innerRadius:50,outerRadius:100,fill:"#ff8800",stroke:"black",strokeWidth:1,})
layer.add(star)//环形
const  ring=new Konva.Ring({x:clientWidth/2,y:clientHeight/2-80,innerRadius:180,outerRadius:200,fill:'#ff8800',stroke:"black",strokeWidth:1
})layer.add(ring)//弧形const arc=new Konva.Arc({x:clientWidth/2,y:clientHeight/2,innerRadius:40,outerRadius:70,angle:90,fill:'#ff8800',stroke:"black",strokeWidth:1,rotation:45})layer.add((arc))stage.add(layer)
}</script><style scoped lang="scss">
.rect {padding: 20px;#canvas {background-color: #eee;border: 1px solid #666;height: calc(100vh - 42px);}
}
</style>

<template><div class="rect"><div id="canvas"></div></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import Konva from 'konva'onMounted(()=>{init()
})
const init=()=>{const el=document.getElementById("canvas")if(!el){return}const {clientWidth,clientHeight}=el//创建一个stage平台const stage=new Konva.Stage({container:'canvas',width:clientWidth,height:clientHeight,})//创建一个layer图层const layer=new Konva.Layer()//标签：主要有label,tag,text三部分组成//1先添加一个labelconst  tooltip=new  Konva.Label({x:clientWidth/2,y:clientHeight/2,})//2定义一个标签const tag=new  Konva.Tag({fill:'#ff8800',pointerDirection:'down',stroke:'black',strokeWidth:1,pointerWidth:10,pointerHeight:10,shadowBlur:10,shadowOffsetX:10,shadowOffsetY:0.5,})//3添加文本const tagText=new Konva.Text({text:'nihao你好',fontSize:18,padding:15,fill:"#fff"})tooltip.add(tag)tooltip.add(tagText)layer.add(tooltip)stage.add(layer)
}</script><style scoped lang="scss">
.rect {padding: 20px;#canvas {background-color: #eee;border: 1px solid #666;height: calc(100vh - 42px);}
}
</style>

正多边形，箭头：

<template><div class="rect"><div id="canvas"></div></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import Konva from 'konva'onMounted(()=>{init()
})
const init=()=>{const el=document.getElementById("canvas")if(!el){return}const {clientWidth,clientHeight}=el//创建一个stage平台const stage=new Konva.Stage({container:'canvas',width:clientWidth,height:clientHeight,})//创建一个layer图层const layer=new Konva.Layer()
//多边形
const  regularPolygon=new Konva.RegularPolygon({x:clientWidth/2,y:clientHeight/2,sides:6,radius:100,//中心到每个顶点的距离fill:"#ff8800",stroke:"black",strokeWidth:1
})layer.add(regularPolygon)//箭头const arrow=new Konva.Arrow({x:clientWidth/2,y:clientHeight/2,points:[0,0,clientWidth/2,clientHeight/2],pointerLength:10,//箭头的尖端部分将有 10 像素的长度pointerWidth:10,stroke:"black",strokeWidth:5,draggable:true//移动})layer.add(arrow)stage.add(layer)
}</script><style scoped lang="scss">
.rect {padding: 20px;#canvas {background-color: #eee;border: 1px solid #666;height: calc(100vh - 42px);}
}
</style>

图片加载动画：

konva动画1

<template><div class="rect"><div id="canvas"></div></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import Konva from 'konva'
import logoUrl from "@/assets/logo.svg"
onMounted(()=>{init()
})
const init=()=> {const el = document.getElementById("canvas")if (!el) {return}const { clientWidth, clientHeight } = el//创建一个stage平台const stage = new Konva.Stage({container: 'canvas',width: clientWidth,height: clientHeight,})//创建一个layer图层const layer = new Konva.Layer()//图片引入Konva.Image.fromURL(logoUrl, (image: Konva.Image) => {image.setAttrs({x: clientWidth / 2,y: clientHeight / 2,height: 50,width: 50,scaleY: 1,scaleX: 1})layer.add(image)const amplitude = 10;  // 振幅，表示图像上下波动的最大距离const period = 1000;   // 周期，表示完成一个完整波动所需的时间（毫秒）const y = image.y() - 10; // 记录图像的初始 Y 坐标，减去 10 是为了让波动的中心更高///Konva.Animation 是 Konva 库中用于创建动画的一个类。它允许你在指定的图层上进行动画效果，能够通过每一帧的回调函数更新图形的状态。//https://konvajs.org/docs/animations/Create_an_Animation.html#HTML5-Canvas-Konva-Animation-Templateconst animation = new Konva.Animation((frame) => {if (!frame) {return;}image.y(amplitude * Math.sin(frame?.time * 2 * Math.PI / period) + y);}, layer);animation.start()})stage.add(layer)
}</script><style scoped lang="scss">
.rect {padding: 20px;#canvas {background-color: #eee;border: 1px solid #666;height: calc(100vh - 42px);}
}
</style>

具体网址：HTML5 Canvas Konva 动画教程 |Konva - JavaScript 2d 画布图书馆 (konvajs.org)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/454947.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！