当前位置: 首页 > news >正文

最新 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地址&#xff0c;尝试npm安装报错 2.找到1.0.5之前的版本npm i jtopo2&#xff0c;安装成功后使用报错&#xff0c;应该是版本冲突了 1.本地引入&#xff0c; 点击官方源码下载&#xff0c;需要jtopo_npm文件 2.引入到本…...

基础课20——智能客服系统的使用维护

1.智能客服系统的维护 智能客服系统在上线后&#xff0c;仍然需要定期的维护和更新。这是因为智能客服系统是一个复杂的软件系统&#xff0c;涉及到多个组件和功能&#xff0c;需要不断优化和改进以满足用户需求和保持市场竞争力。 保持系统的稳定性和性能&#xff1a;随着用…...

Aop自定义注解生成日志

Aop自定义注解生成日志 1.编写自定义注解 //表示此注解可以标注在方法上 Target(ElementType.METHOD) //运行时生效 Retention(RetentionPolicy.RUNTIME) public interface OpetionLog {//定义一个变量&#xff0c;可以接收参数String value() default "";}2.Cont…...

虚幻引擎:RPC:远端调用

1.如何区当前是服务器还是在客服端 2.如何修改一个actor的所有权 修改所有权必须 在服务器上进行修改,不允许在客户端进行修改...

涉及多种位运算操作混合类题目——通过加转三进制(扩大状态,不变枚举量):CF1033F

https://www.luogu.com.cn/problem/CF1033F 我们发现直接用二进制来做很难做&#xff0c;但我们可以观察其给的表 我们发现如果表示成和的形式是容易进行一一对应的 对于询问的时候&#xff0c;我们直接枚举每位有的和是多少&#xff0c;虽然状态是三次的&#xff0c;但是对于…...

BIOS开发笔记 - DDR基础

简介 内存是计算机中重要的组成部分,主要为CPU计算时提供一个数据的临时存储的场所。CPU在处理数据前,会将数据从外存复制到内存中,然后再处理内存中的数据,如果需要将结果保存,则一次性写回外存,这样便大大提高CPU的处理效率。 …...

基于SpringBoot+Vue的旅游系统、前后端分离

博主24h在线&#xff0c;想要源码文档部署视频直接私聊&#xff0c;低价有偿&#xff01; 基于SpringBootVue的旅游系统、前后端分离 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI 工具&#xff1a;IDEA/Eci…...

手动制作Docker容器镜像

文章目录 手动制作Docker容器镜像说明前期准备制作镜像1.启动一个centos系统的容器2.在centos容器中源码安装httpd服务3.基于已经安装好httpd服务的centos容器制作一个httpd镜像4.验证制作出来的镜像的功能5.上传至自己的docker镜像仓库&#xff08;可选&#xff09; 手动制作D…...

WPF布局控件之WrapPanel布局

前言&#xff1a;博主文章仅用于学习、研究和交流目的&#xff0c;不足和错误之处在所难免&#xff0c;希望大家能够批评指出&#xff0c;博主核实后马上更改。 概述&#xff1a; 后续排序按照从上至下或从右至左的顺序进行&#xff0c;具体取决于方向属性的值。WrapPanel 位…...

实现自动接听电话

在Android 12中实现自动接听电话的功能可以通过使用特定的API来实现,具体的实现方法如下: 导入需要的类库和接口 import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.te…...

计算机网络之网络层(全)

网络层的功能 互联网在网络层的设计思路是&#xff0c;向上只提供简单灵活的、无连接的、尽最大努力交付的数据报服务。 路由器在能够开始向输出链路传输分组的第一位之前&#xff0c;必须先接收到整个分组&#xff0c;这种机制称为&#xff1a;存储转发机制 异构网络互连 用…...

PS学习笔记合集

2.一些快捷键 一、放大快捷键 Ctrl&#xff1a;在画布中点击一次&#xff0c;即可放大一次&#xff0c;可多次点击。 CtrlShift&#xff1a;在画布中点击一次&#xff0c;即可放大到适合窗口大小。 CtrlAlt&#xff1a;在画布中点击一次&#xff0c;即可放大到适合窗口大小&a…...

汇总记录Python常用的基础内置方法

这里汇总记录一些Python常用的基础内置方法 (参照哔站有一个大佬"小飞有点东西"的笔记整理记录而得&#xff0c;仅限方便需要的时候可以直接在网上搜索查阅而整理记录) 输出/输入 print() input()print打印颜色设置 显示方式;前景颜色;背景颜色&#xff0c;这3个…...

基于Tensorflow卷积神经网络玉米病害识别系统(UI界面)

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 Tensorflow是一个流行的机器学习框架&#xff0c;可用于训练和部署各种人工智能模型。玉米病害识别系统基于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 详细错误信息&#xff1a; e: /Users/andreifufylev/developme…...

AC修炼计划(AtCoder Regular Contest 163)

传送门&#xff1a;AtCoder Regular Contest 163 - AtCoder 第一题我们只需要将字符串分成两段&#xff0c;如果存在前面一段比后面一段大就成立。 #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开源后的第三方进化版本&#xff0c;它对原始的 Whisper 模型结构进行了改进和优化。这包括减少模型的层数、减少参数量、简化模型结构等&#xff0c;从而减少了计算量和内存消耗&#xff0c;提高了推理速度&#xff0c;与此同时&#xff0c;Faster-Whi…...

【设计模式】第24节:行为型模式之“模板方法模式”

一、简介 模板方法模式在一个方法中定义一个算法骨架&#xff0c;并将某些步骤推迟到子类中实现。模板方法模式可以让子类在不改变算法整体结构的情况下&#xff0c;重新定义算法中的某些步骤。 模板模式有两大作用&#xff1a;复用和扩展。其中&#xff0c;复用指的是&#…...

【考研数学】数学“背诵手册”(二)| 线代及概率论部分

文章目录 引言二、线代施密特正交化分块矩阵转置、逆、伴随之间的运算关于秩定义性质 三、概统常见分布的期望及方差 引言 这数一全部内容太多了&#xff0c;放在一篇文章里的话&#xff0c;要编辑就很困难&#xff0c;就把线代和概率放在这篇文章里吧。 二、线代 施密特正交…...

Android WMS——WindowState介绍(十三)

前面文章中的 addWindow 方法,首先获取了 DisplayContent,紧接着判断窗口的 type 类型并标记。然后获取 token 信息,且该信息是通过 DisplayContent 中的方法获取的。最后就是创建并保存 WindowState 信息。 一、简介 在窗口管理系统(Window Manager Service,WMS)中,Wi…...

手把手教你:在STM32F103C8T6上搞定ST25R3911B NFC读卡器(基于RFAL V2.8.0)

在STM32F103C8T6上实现ST25R3911B NFC读卡器的完整移植指南 对于嵌入式开发者来说&#xff0c;将NFC功能集成到资源受限的MCU上是一项常见但充满挑战的任务。本文将详细介绍如何在STM32F103C8T6这款经典Cortex-M3 MCU上&#xff0c;成功移植ST25R3911B NFC读卡器驱动和RFAL库(V…...

【Web安全】JWT常见安全漏洞总结

文章目录前言1. JWT基础与漏洞概述2. JWT核心漏洞解析2.1 未校验签名2.1.1 漏洞原理2.1.2 利用方式2.1.3 实战脚本2.2 算法篡改漏洞2.2.1 漏洞原理2.2.2 核心说明2.2.3 攻击流程2.3 弱密钥漏洞2.3.1 漏洞原理2.3.2 利用方式2.4 垂直越权2.4.1 漏洞原理2.4.2 利用流程2.5 KID字段…...

从MobileNet到HRNet:如何为你的DeepLabV3+项目挑选最合适的PyTorch骨干网络?

从MobileNet到HRNet&#xff1a;DeepLabV3骨干网络选型实战指南 当你面对Pascal VOC数据集上89%的mIoU和Cityscapes上82.1%的基准成绩时&#xff0c;是否思考过这些数字背后隐藏的工程抉择&#xff1f;在图像分割领域&#xff0c;骨干网络的选择往往决定着项目成败——它既影响…...

生态数据分析避坑指南:你的Mantel检验结果可靠吗?聊聊距离算法选择与共线性控制

生态数据分析避坑指南&#xff1a;你的Mantel检验结果可靠吗&#xff1f;聊聊距离算法选择与共线性控制 生态数据分析中&#xff0c;Mantel检验作为一种常用的空间相关性分析方法&#xff0c;被广泛应用于物种分布与环境因子关系的研究。然而&#xff0c;许多研究者在实际操作中…...

SpringBoot3 + JDK17 项目实战:用MyBatis-Plus和Redis快速搭建一个用户管理系统

SpringBoot3 JDK17 实战&#xff1a;构建高性能用户管理系统 最近在重构公司内部的管理系统时&#xff0c;我选择了SpringBoot3和JDK17这套组合。新版本带来的性能提升和语法糖让开发效率提高了不少&#xff0c;特别是记录日志和编写Lambda表达式时。本文将带你从零开始&#…...

NCMconverter终极指南:3步轻松解密NCM音频,实现全平台播放自由 [特殊字符]

NCMconverter终极指南&#xff1a;3步轻松解密NCM音频&#xff0c;实现全平台播放自由 &#x1f3b5; 【免费下载链接】NCMconverter NCMconverter将ncm文件转换为mp3或者flac文件 项目地址: https://gitcode.com/gh_mirrors/nc/NCMconverter 你是否遇到过从音乐平台下载…...

银河麒麟系统下Qt5.9.9编译fcitx-qt5的版本适配与源码修改实战

1. 银河麒麟系统下Qt中文输入问题的根源 在银河麒麟系统上开发Qt应用程序时&#xff0c;中文输入法无法正常切换是个常见痛点。这个问题本质上源于Qt输入法插件与Qt版本之间的兼容性断裂。我曾在多个项目中遇到这种情况&#xff1a;明明系统自带输入法可以正常工作&#xff0c;…...

JetBrains IDE试用期重置终极指南:如何永久免费使用专业开发工具

JetBrains IDE试用期重置终极指南&#xff1a;如何永久免费使用专业开发工具 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 还在为JetBrains IDE试用期到期而烦恼吗&#xff1f;每次30天试用结束后&#xff0c;那…...

Linux内核中断处理机制深度解析:中断嵌套与异常打断原理

1. 中断处理中的“打断”迷思&#xff1a;一个内核老兵的深度剖析在Linux内核开发与调试的深水区里&#xff0c;中断处理机制就像一把双刃剑&#xff0c;它赋予了系统响应外部事件的实时性&#xff0c;却也带来了复杂性与不确定性。其中&#xff0c;一个经典且常被误解的问题就…...

CodeBlocks 20.03 安装与汉化保姆级教程(附中文包下载与常见问题解决)

CodeBlocks 20.03 安装与汉化全流程实战指南 对于刚接触C/C开发的初学者来说&#xff0c;选择一款合适的集成开发环境(IDE)是迈入编程世界的第一步。CodeBlocks以其轻量级、跨平台和开源免费的特性&#xff0c;成为众多教育机构和自学者的首选。本文将带你从零开始&#xff0c;…...