当前位置：首页 > article >正文

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

article 2024/10/24 11:46:59

官网：

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先添加一个label
  const  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-Template
    const 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.kler.cn/news/362942.html