Konva 从入门到实践 - day3

发布时间：2026/7/2 20:48:30

Konva 从入门到实践 - day3

下面是Konva 第 3 天的完整实现。我们在第 2 天可拖拽布局的基础上，增加设备间输送线以及沿输送线流动的动画货物，让 WCS 画面真正“动起来”。

第 3 天目标

  • 在两个设备之间绘制一条输送线（Konva.Line）
  • 在输送线上添加一个移动的圆点，模拟货物流动
  • 货物点沿输送线往复运动，并可根据输送线状态改变颜色
  • 拖拽设备时，输送线自动跟随端点移动

完整可运行代码（Day 3）

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>WCS 设备布局 - Day3 连线与流动动画</title><style>body{margin:0;padding:20px;background:#f0f2f5;font-family:sans-serif;}#container{border:1px solid #ccc;background:#fff;width:800px;height:600px;cursor:default;}.info{margin-top:10px;font-size:14px;color:#666;}</style></head><body><h2>仓库设备布局 - 输送线与流动动画</h2><divid="container"></div><divclass="info">拖拽设备时输送线自动跟随。圆点沿输送线流动，模拟货物运输。</div><scriptsrc="https://unpkg.com/konva@9/konva.min.js"></script><script>// ========== 1. 原始设备数据 ==========constlayoutData={layout:[{id:"1782803001807",deviceCode:"stacker",imgName:"ddj",left:480,top:275,width:50,height:40,angle:0,moveLength:200,selected:false},{id:"1782803143726",deviceCode:"conveyor",imgName:"ssx2",left:640,// 稍微调整位置，让两个设备有间距top:275,width:50,height:40,angle:0,moveLength:null,selected:false}]};// ========== 2. 创建画布 ==========conststage=newKonva.Stage({container:'container',width:800,height:600});constlayer=newKonva.Layer();stage.add(layer);// 全局引用letselectionRect=null;letselectedNode=null;constnodeStartPos=newMap();// 输送线相关letconveyorLine=null;// 输送线letcargoDot=null;// 流动圆点letanimation=null;// Konva.Animation 实例letflowDirection=1;// 流动方向：1 正向，-1 反向letflowProgress=0;// 0 ~ 1// ========== 3. 创建选中框 ==========functioncreateSelectionRect(){selectionRect=newKonva.Rect({stroke:'#1e90ff',strokeWidth:2,dash:[4,4],fill:'rgba(30, 144, 255, 0.1)',visible:false,listening:false});layer.add(selectionRect);}createSelectionRect();functionupdateSelectionRect(node){if(!node){selectionRect.visible(false);layer.batchDraw();return;}constbox=node.getClientRect({skipTransform:false});selectionRect.position({x:box.x,y:box.y});selectionRect.size({width:box.width,height:box.height});selectionRect.visible(true);layer.batchDraw();}functionselectNode(node){if(selectedNode===node)return;if(selectedNode){selectedNode.setAttr('selected',false);}selectedNode=node;if(node){node.setAttr('selected',true);updateSelectionRect(node);}else{updateSelectionRect(null);}}stage.on('click',(e)=>{if(e.target===stage)selectNode(null);});// ========== 4. 拖拽处理 ==========functiononDragStart(e){constnode=e.target;nodeStartPos.set(node.id(),{x:node.x(),y:node.y()});}functiononDragMove(e){constnode=e.target;constmoveLength=node.getAttr('moveLength');if(!moveLength)return;conststartPos=nodeStartPos.get(node.id());if(!startPos)return;constdx=node.x()-startPos.x;constdy=node.y()-startPos.y;constdist=Math.sqrt(dx*dx+dy*dy);if(dist>moveLength){constratio=moveLength/dist;node.position({x:startPos.x+dx*ratio,y:startPos.y+dy*ratio});}}functiononDragEnd(e){constnode=e.target;nodeStartPos.delete(node.id());if(selectedNode===node)updateSelectionRect(node);// 拖拽结束后更新输送线端点updateConveyorLine();}functionbindEvents(node){node.on('click',(e)=>{e.evt.stopPropagation();selectNode(node);});node.on('dragstart',onDragStart);node.on('dragmove',onDragMove);node.on('dragend',onDragEnd);}// ========== 5. 创建节点（同Day2） ==========functioncreateDeviceNode(device){returnnewPromise((resolve)=>{constimg=newwindow.Image();img.onload=()=>{constnode=newKonva.Image({id:device.id,image:img,x:device.left,y:device.top,width:device.width,height:device.height,rotation:device.angle,draggable:true,deviceCode:device.deviceCode,moveLength:device.moveLength,selected:false});resolve(node);};img.onerror=()=>{constnode=newKonva.Rect({id:device.id,x:device.left,y:device.top,width:device.width,height:device.height,fill:'#cccccc',stroke:'#333',strokeWidth:1,rotation:device.angle,draggable:true,deviceCode:device.deviceCode,moveLength:device.moveLength,selected:false});resolve(node);};img.src=`images/${device.imgName}.png`;});}// ========== 6. 输送线与动画 ==========// 获取设备节点的输出/输入连接点（这里取设备右边缘/左边缘中点）functiongetDeviceConnectPoints(){conststacker=stage.findOne('#1782803001807');constconveyor=stage.findOne('#1782803143726');if(!stacker||!conveyor)returnnull;conststackerBox=stacker.getClientRect({skipTransform:false});constconveyorBox=conveyor.getClientRect({skipTransform:false});// 堆垛机右边缘中点 -> 输送线左边缘中点return{startX:stackerBox.x+stackerBox.width,startY:stackerBox.y+stackerBox.height/2,endX:conveyorBox.x,endY:conveyorBox.y+conveyorBox.height/2};}functioncreateConveyorLine(){conveyorLine=newKonva.Line({stroke:'#2ecc71',strokeWidth:4,lineCap:'round',lineJoin:'round',points:[0,0,0,0],// 初始占位listening:false});layer.add(conveyorLine);// 流动货物圆点cargoDot=newKonva.Circle({radius:6,fill:'#e67e22',stroke:'#fff',strokeWidth:2,x:0,y:0,listening:false});layer.add(cargoDot);}// 根据端点更新输送线路径functionupdateConveyorLine(){if(!conveyorLine)return;constpoints=getDeviceConnectPoints();if(!points)return;conveyorLine.points([points.startX,points.startY,points.endX,points.endY]);layer.batchDraw();}// 启动流动动画functionstartFlowAnimation(){if(animation)return;animation=newKonva.Animation(()=>{if(!cargoDot||!conveyorLine)return;constpoints=getDeviceConnectPoints();if(!points)return;// 更新进度，0~1 往复constspeed=0.008;flowProgress+=speed*flowDirection;if(flowProgress>=1){flowProgress=1;flowDirection=-1;}elseif(flowProgress<=0){flowProgress=0;flowDirection=1;}// 线性插值计算当前位置constcx=points.startX+(points.endX-points.startX)*flowProgress;constcy=points.startY+(points.endY-points.startY)*flowProgress;cargoDot.position({x:cx,y:cy});layer.batchDraw();});animation.start();}functionstopFlowAnimation(){if(animation){animation.stop();animation=null;}}// ========== 7. 主渲染流程 ==========asyncfunctionrenderLayout(){constnodes=awaitPromise.all(layoutData.layout.map(device=>createDeviceNode(device)));nodes.forEach(node=>{bindEvents(node);layer.add(node);});// 创建输送线和货物点createConveyorLine();updateConveyorLine();// 启动流动动画startFlowAnimation();layer.batchDraw();console.log('Day3 就绪：输送线可随设备移动，货物点往复流动。');}renderLayout();</script></body></html>

关键实现解析

1. 输送线的绘制

  • 使用Konva.Line，将两点连成线段。
  • 连接点取设备包围盒的边缘中点：堆垛机右边缘中点 → 输送线左边缘中点。
  • 通过getDeviceConnectPoints()实时获取两个设备当前的包围盒，计算出端点坐标。
  • 当设备拖拽时（dragend），调用updateConveyorLine()更新线的坐标。

2. 流动动画

  • 创建一个Konva.Circle作为货物点。
  • 使用Konva.Animation驱动，每帧根据进度 (flowProgress) 沿输送线插值位置。
  • 进度在 0 和 1 之间往复变化，通过flowDirection控制方向，模拟货物来回运输。
  • 动画速度通过speed = 0.008控制，可按需调整。

3. 性能与更新

  • 将输送线和货物点都设为listening: false，避免干扰拖拽和点击。
  • 在dragend事件中更新输送线端点，保证实时跟随。
  • 动画帧内仅更新货物点位置并调用layer.batchDraw()，效率足够。

4. 状态样式（可扩展）

  • 当前默认输送线为绿色 (#2ecc71)，货物点为橙色。
  • 你可以在后续根据状态改变颜色，例如：
    conveyorLine.stroke('#e74c3c');// 故障时变红cargoDot.fill('#ff0000');

测试步骤

  1. 确保 Day2 的图片仍在images文件夹（或占位矩形自动工作）。
  2. 打开页面，你会看到两个设备之间多了一条绿色线段。
  3. 一个橙色圆点沿输送线来回移动。
  4. 拖拽堆垛机或输送线，输送线会随设备端点实时更新，圆点运动路径也会同步变化。

第 3 天总结

你已经学会了：

  • 动态绘制Konva.Line并响应节点移动自动更新
  • 使用Konva.Animation创建逐帧动画
  • 线性插值实现沿路径运动
  • 动画速度与方向控制

现在画面已经具备基本的“动态监控”感。明天第 4 天我们将实现状态驱动的视觉变化（颜色、闪烁、文本），让设备能够响应后端数据报警。
如果运行中有任何问题或想调整动画样式，随时告诉我。

相关新闻

河北玻璃钢喷涂机喷涂效果

河北玻璃钢喷涂机喷涂效果

在玻璃钢制品的生产过程中&#xff0c;喷涂机的作用至关重要。它不仅影响着产品的外观质量&#xff0c;还直接关系到产品的使用寿命和性能。今天&#xff0c;我们就来聊聊河北地区的玻璃钢喷涂机&#xff0c;特别是以石家庄技蒂固科技有限公司&#xff08;以下简称“技蒂固”&a…

2026/7/2 20:48:40
openEuler-portal-mcp开源贡献指南：如何参与项目开发与工具扩展

openEuler-portal-mcp开源贡献指南：如何参与项目开发与工具扩展

openEuler-portal-mcp开源贡献指南&#xff1a;如何参与项目开发与工具扩展 【免费下载链接】openEuler-portal-mcp The repository of openEuler portal MCP Server 项目地址: https://gitcode.com/openeuler/openEuler-portal-mcp 前往项目官网免费下载&#xff1a;ht…

2026/7/2 20:48:40
Sketchfab 3D模型下载工具：如何免费获取高质量3D资源

Sketchfab 3D模型下载工具：如何免费获取高质量3D资源

Sketchfab 3D模型下载工具&#xff1a;如何免费获取高质量3D资源 【免费下载链接】sketchfab sketchfab download userscipt for Tampermonkey by firefox only 项目地址: https://gitcode.com/gh_mirrors/sk/sketchfab 还在为Sketchfab上精美的3D模型无法下载而烦恼吗&…

2026/7/2 20:48:40

最新新闻

AI测试用例生成：如何提升场景覆盖率与工程实践

AI测试用例生成：如何提升场景覆盖率与工程实践

1. 项目概述&#xff1a;当AI开始“思考”测试场景最近在团队里推动AI辅助测试&#xff0c;发现一个挺有意思的现象&#xff1a;很多同事一开始对“AI自动生成测试用例”抱有不切实际的幻想&#xff0c;以为丢个需求文档进去&#xff0c;就能吐出一份完美无缺、覆盖所有边边角角…

2026/7/2 22:20:45
copia：用拉丁词源原理校正微生物丰度数据丰富度偏差的命令行工具

copia：用拉丁词源原理校正微生物丰度数据丰富度偏差的命令行工具

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;copia 是一个面向微生物组研究者的丰度数据校正工具&#xff0c;专门解决因测序深度、PCR偏好或抽样不均导致的丰富度&#xff08;richness&#xff09;估计偏差问题。它基于拉丁词源学启发的数学建模思路&…

2026/7/2 22:20:45
iOS自动化测试：MAC通过Xcode连接真机与WDA环境搭建指南

iOS自动化测试：MAC通过Xcode连接真机与WDA环境搭建指南

1. 项目概述&#xff1a;为什么要在MAC上用Xcode连接真机做自动化测试&#xff1f; 作为一名在iOS开发和测试领域摸爬滚打了多年的老手&#xff0c;我见过太多团队在自动化测试的起步阶段就栽了跟头。最常见的误区就是&#xff1a;只在模拟器上跑自动化脚本&#xff0c;觉得又…

2026/7/2 22:20:45
接口测试工具选型指南：Postman、Requests与Pytest的实战对比与架构设计

接口测试工具选型指南：Postman、Requests与Pytest的实战对比与架构设计

1. 项目概述&#xff1a;接口测试工具的三国演义做接口测试&#xff0c;尤其是用Python的&#xff0c;绕不开三个名字&#xff1a;Postman、Requests和Pytest。新手刚入门时&#xff0c;面对这三个选项常常一脸懵&#xff1a;我到底该用哪个&#xff1f;它们仨到底有啥区别&…

2026/7/2 22:20:45
Headless Recorder与Playwright：自动化测试脚本的智能生成与优化实战

Headless Recorder与Playwright：自动化测试脚本的智能生成与优化实战

1. 项目概述&#xff1a;为什么我们需要Headless Recorder&#xff1f;如果你和我一样&#xff0c;每天都要和一堆Web应用打交道&#xff0c;手动点点点做回归测试&#xff0c;那一定对“自动化测试”这四个字又爱又恨。爱的是它解放双手的潜力&#xff0c;恨的是写测试脚本那漫…

2026/7/2 22:20:45
深入理解pytest fixture：从依赖注入到自动化测试框架设计

深入理解pytest fixture：从依赖注入到自动化测试框架设计

1. 项目概述&#xff1a;为什么fixture是pytest的灵魂 如果你用过pytest&#xff0c;那你肯定对 pytest.fixture 这个装饰器不陌生。但很多人可能只是把它当作一个“初始化数据”的工具&#xff0c;用完了事。实际上&#xff0c;fixture远不止于此&#xff0c;它是pytest框架…

2026/7/2 22:19:55

日新闻

HBM Predictor数据集完全指南：从19个数据中心收集的HBM错误数据深度解析

HBM Predictor数据集完全指南：从19个数据中心收集的HBM错误数据深度解析

HBM Predictor数据集完全指南&#xff1a;从19个数据中心收集的HBM错误数据深度解析 【免费下载链接】hbm-predictor this project is an in-depth data-driven analysis and a hierarchical failure prediction model for high-bandwidth memory. 项目地址: https://gitcode…

2026/7/2 0:00:29
医疗RAG不是加向量库：临床知识守门人架构设计

医疗RAG不是加向量库：临床知识守门人架构设计

1. 项目概述&#xff1a;为什么医疗场景下的RAG不是“加个向量库”就完事了你手头有一份刚从PubMed Central批量下载下来的327篇糖尿病诊疗指南、临床试验报告和系统综述PDF&#xff0c;文件夹命名很专业——med_knowledge_base_v2.1。你信心满满地打开Jupyter Notebook&#x…

2026/7/2 0:00:29
终极Notepad++ Markdown实时预览插件：5分钟掌握高效文档编辑的完整指南

终极Notepad++ Markdown实时预览插件：5分钟掌握高效文档编辑的完整指南

终极Notepad Markdown实时预览插件&#xff1a;5分钟掌握高效文档编辑的完整指南 【免费下载链接】MarkdownViewerPlusPlus A Notepad Plugin to view a Markdown file rendered on-the-fly 项目地址: https://gitcode.com/gh_mirrors/ma/MarkdownViewerPlusPlus Markdo…

2026/7/2 0:00:29

周新闻

Figma中文界面插件终极指南：5分钟快速上手完整教程

Figma中文界面插件终极指南：5分钟快速上手完整教程

Figma中文界面插件终极指南&#xff1a;5分钟快速上手完整教程 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 还在为Figma的英文界面而困扰吗&#xff1f;FigmaCN中文插件是设计师必备…

2026/7/2 15:30:08
Windows字体自定义终极方案：No!! MeiryoUI完全指南

Windows字体自定义终极方案：No!! MeiryoUI完全指南

Windows字体自定义终极方案&#xff1a;No!! MeiryoUI完全指南 【免费下载链接】noMeiryoUI No!! MeiryoUI is Windows system font setting tool on Windows 8.1/10/11. 项目地址: https://gitcode.com/gh_mirrors/no/noMeiryoUI 还在为Windows系统单调的字体界面感到困…

2026/7/2 15:29:50
WinBtrfs终极实战指南：3种配置方案解锁Windows Btrfs文件系统完整功能

WinBtrfs终极实战指南：3种配置方案解锁Windows Btrfs文件系统完整功能

WinBtrfs终极实战指南&#xff1a;3种配置方案解锁Windows Btrfs文件系统完整功能 【免费下载链接】btrfs WinBtrfs - an open-source btrfs driver for Windows 项目地址: https://gitcode.com/gh_mirrors/bt/btrfs WinBtrfs是一款革命性的开源Windows驱动程序&#xf…

2026/7/2 15:29:51

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/2 15:47:40
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/2 15:47:40
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/2 14:14:33