Konva学习笔记0-创建项目

最新推荐文章于 2024-08-16 09:45:57 发布

xxhls0208

最新推荐文章于 2024-08-16 09:45:57 发布

阅读量151

点赞数

文章标签：学习笔记前端前端框架动画图形渲染游戏程序

本文链接：https://blog.csdn.net/m0_66681776/article/details/132490884

版权

Konva学习笔记0-创建项目

安装webpack

npm i webpack webpack-cli -g

新建项目文件夹

mkdir demo
cd demo

安装辅助框架

webpack-cli init

此时会提醒是否安装xx包，输入y+enter即可开始安装
在这里插入图片描述

再次初始化项目

在这里插入图片描述

安装完毕会报错，不理它，再次初始化

webpack-cli init

设置项目选项

脚手架提供了一系列初始化选择，提供博主个人的选择，凭自主喜好即可
在这里插入图片描述 K

安装并配置Konva

npm i konva

编辑tsconfig.json，在compilerOptions节点中添加lib和moduleResolution

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true,
        "lib": [ "es6", "dom" ],
        "moduleResolution": "node"
    }
}

测试Demo

修改index.html

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8" />
     <title>Webpack App</title>
 </head>
 <body>
     <div id="container"></div>
 </body>
</html>

修改src/index.ts

import Konva from "konva";

const width = window.innerWidth;
const height = window.innerHeight;

const stage = new Konva.Stage({
   container: 'container',
   width: width,
   height: height
});

const layer = new Konva.Layer();

const rect1 = new Konva.Rect({
   x: 20,
   y: 20,
   width: 100,
   height: 50,
   fill: 'green',
   stroke: 'black',
   strokeWidth: 4
});
// add the shape to the layer
layer.add(rect1);

const rect2 = new Konva.Rect({
   x: 150,
   y: 40,
   width: 100,
   height: 50,
   fill: 'red',
   shadowBlur: 10,
   cornerRadius: 10
});
layer.add(rect2);

const rect3 = new Konva.Rect({
   x: 50,
   y: 120,
   width: 100,
   height: 100,
   fill: 'blue',
   cornerRadius: [0, 10, 20, 30]
});
layer.add(rect3);

// add the layer to the stage
stage.add(layer);