最新 vie-vite框架下 jtopo安装使用
官方地址
官方源码
安装下载
1.官方好像都没有给git地址,尝试npm安装报错

2.找到1.0.5之前的版本npm i jtopo2,安装成功后使用报错,应该是版本冲突了

1.本地引入,
点击官方源码下载,需要jtopo_npm文件

2.引入到本地根目录

3.vue文件使用
<template><!-- 用于渲染显示的div --><div id="divId" style="height:600px;width:680px;border:1px solid gray"></div>
</template><script setup lang="ts">
import { onMounted } from 'vue'
import { topoManager } from "./TopoManager";
/** 初始化 */
onMounted(() => {topoManager.init(document.getElementById("divId"));
})
</script>
4.TopoManager文件是官方文件
import {Stage, Layer, Node, Link} from ‘…/…/jtopo_npm/core’;
能正常build打包,不确定生产环境地址是否有问题,若有使用后续更新
下面有安装到node_modules的方法,不用修改地址

运行成功

以前使用jtopo-in-node,但版本很旧了,文档都找不到了
import ‘jtopo-in-node’;
是这种使用方式 new JTopo.Scene(stage);
按官网提示 cnpm install ./jtopo_npm/core
一直安装失败,不知道是不是版本的问题
看到官方package.json

灵机一动,给本地项目加上
"@jtopo/core": "file:jtopo_npm/core","@jtopo/editor": "file:jtopo_npm/editor",
再执行cnpm i ,node_modules依赖包上有了
直接import {Stage, Layer, Node, Link} from '@jtopo/core';引入,也能运行成功了



尝试使用,也是2d画图的
Konva
相关文章:
最新 vie-vite框架下 jtopo安装使用
官方地址 官方源码 安装下载 1.官方好像都没有给git地址,尝试npm安装报错 2.找到1.0.5之前的版本npm i jtopo2,安装成功后使用报错,应该是版本冲突了 1.本地引入, 点击官方源码下载,需要jtopo_npm文件 2.引入到本…...
基础课20——智能客服系统的使用维护
1.智能客服系统的维护 智能客服系统在上线后,仍然需要定期的维护和更新。这是因为智能客服系统是一个复杂的软件系统,涉及到多个组件和功能,需要不断优化和改进以满足用户需求和保持市场竞争力。 保持系统的稳定性和性能:随着用…...
Aop自定义注解生成日志
Aop自定义注解生成日志 1.编写自定义注解 //表示此注解可以标注在方法上 Target(ElementType.METHOD) //运行时生效 Retention(RetentionPolicy.RUNTIME) public interface OpetionLog {//定义一个变量,可以接收参数String value() default "";}2.Cont…...
虚幻引擎:RPC:远端调用
1.如何区当前是服务器还是在客服端 2.如何修改一个actor的所有权 修改所有权必须 在服务器上进行修改,不允许在客户端进行修改...
涉及多种位运算操作混合类题目——通过加转三进制(扩大状态,不变枚举量):CF1033F
https://www.luogu.com.cn/problem/CF1033F 我们发现直接用二进制来做很难做,但我们可以观察其给的表 我们发现如果表示成和的形式是容易进行一一对应的 对于询问的时候,我们直接枚举每位有的和是多少,虽然状态是三次的,但是对于…...
BIOS开发笔记 - DDR基础
简介 内存是计算机中重要的组成部分,主要为CPU计算时提供一个数据的临时存储的场所。CPU在处理数据前,会将数据从外存复制到内存中,然后再处理内存中的数据,如果需要将结果保存,则一次性写回外存,这样便大大提高CPU的处理效率。 …...
基于SpringBoot+Vue的旅游系统、前后端分离
博主24h在线,想要源码文档部署视频直接私聊,低价有偿! 基于SpringBootVue的旅游系统、前后端分离 开发语言:Java 数据库:MySQL 技术:SpringBoot、Vue、Mybaits Plus、ELementUI 工具:IDEA/Eci…...
手动制作Docker容器镜像
文章目录 手动制作Docker容器镜像说明前期准备制作镜像1.启动一个centos系统的容器2.在centos容器中源码安装httpd服务3.基于已经安装好httpd服务的centos容器制作一个httpd镜像4.验证制作出来的镜像的功能5.上传至自己的docker镜像仓库(可选) 手动制作D…...
WPF布局控件之WrapPanel布局
前言:博主文章仅用于学习、研究和交流目的,不足和错误之处在所难免,希望大家能够批评指出,博主核实后马上更改。 概述: 后续排序按照从上至下或从右至左的顺序进行,具体取决于方向属性的值。WrapPanel 位…...
实现自动接听电话
在Android 12中实现自动接听电话的功能可以通过使用特定的API来实现,具体的实现方法如下: 导入需要的类库和接口 import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.te…...
计算机网络之网络层(全)
网络层的功能 互联网在网络层的设计思路是,向上只提供简单灵活的、无连接的、尽最大努力交付的数据报服务。 路由器在能够开始向输出链路传输分组的第一位之前,必须先接收到整个分组,这种机制称为:存储转发机制 异构网络互连 用…...
PS学习笔记合集
2.一些快捷键 一、放大快捷键 Ctrl:在画布中点击一次,即可放大一次,可多次点击。 CtrlShift:在画布中点击一次,即可放大到适合窗口大小。 CtrlAlt:在画布中点击一次,即可放大到适合窗口大小&a…...
汇总记录Python常用的基础内置方法
这里汇总记录一些Python常用的基础内置方法 (参照哔站有一个大佬"小飞有点东西"的笔记整理记录而得,仅限方便需要的时候可以直接在网上搜索查阅而整理记录) 输出/输入 print() input()print打印颜色设置 显示方式;前景颜色;背景颜色,这3个…...
基于Tensorflow卷积神经网络玉米病害识别系统(UI界面)
欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 Tensorflow是一个流行的机器学习框架,可用于训练和部署各种人工智能模型。玉米病害识别系统基于Tensorf…...
Execution failed for task ‘:keyboard_utils:compileDebugKotlin‘.
Execution failed for task ‘:keyboard_utils:compileDebugKotlin’. 这个错误是keyboard_utils依赖报错。 这个问题在keyboard_utils github项目的issues 有记载Project does not run with new Flutter 2.10.0 详细错误信息: e: /Users/andreifufylev/developme…...
AC修炼计划(AtCoder Regular Contest 163)
传送门:AtCoder Regular Contest 163 - AtCoder 第一题我们只需要将字符串分成两段,如果存在前面一段比后面一段大就成立。 #include<bits/stdc.h> #define int long long using namespace std; typedef long long ll; typedef pair<int,int&g…...
持续进化,快速转录,Faster-Whisper对视频进行双语字幕转录实践(Python3.10)
Faster-Whisper是Whisper开源后的第三方进化版本,它对原始的 Whisper 模型结构进行了改进和优化。这包括减少模型的层数、减少参数量、简化模型结构等,从而减少了计算量和内存消耗,提高了推理速度,与此同时,Faster-Whi…...
【设计模式】第24节:行为型模式之“模板方法模式”
一、简介 模板方法模式在一个方法中定义一个算法骨架,并将某些步骤推迟到子类中实现。模板方法模式可以让子类在不改变算法整体结构的情况下,重新定义算法中的某些步骤。 模板模式有两大作用:复用和扩展。其中,复用指的是&#…...
【考研数学】数学“背诵手册”(二)| 线代及概率论部分
文章目录 引言二、线代施密特正交化分块矩阵转置、逆、伴随之间的运算关于秩定义性质 三、概统常见分布的期望及方差 引言 这数一全部内容太多了,放在一篇文章里的话,要编辑就很困难,就把线代和概率放在这篇文章里吧。 二、线代 施密特正交…...
Android WMS——WindowState介绍(十三)
前面文章中的 addWindow 方法,首先获取了 DisplayContent,紧接着判断窗口的 type 类型并标记。然后获取 token 信息,且该信息是通过 DisplayContent 中的方法获取的。最后就是创建并保存 WindowState 信息。 一、简介 在窗口管理系统(Window Manager Service,WMS)中,Wi…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
