最新 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/164233.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何选择SVM中最佳的【核函数】

参数“kernel"在sklearn中可选以下几种 选项&#xff1a; 接下来我们 就通过一个例子&#xff0c;来探索一下不同数据集上核函数的表现。我们现在有一系列线性或非线性可分的数据&#xff0c;我们希望通过绘制SVC在不同核函数下的决策边界并计算SVC在不同核函数下分类准确…

python使用pysqlcipher3对sqlite数据库进行加密

python对很多项目都需要对sqlite数据库的数据进行加密&#xff0c;最流行的加密方式是使用pysqlcipher3&#xff0c;当前使用的python版本为3.7&#xff0c;本博文是直接使用pysqlcipher3在项目上的应用&#xff0c;使用的是已编译好的pysqlcipher3包&#xff0c;如果你需要pys…

【pyspider】爬取ajax请求数据(post),如何处理python2字典的unicode编码字段?

情景&#xff1a;传统的爬虫只需要设置fetch_typejs即可&#xff0c;因为可以获取到整个页面。但是现在ajax应用越来越广泛&#xff0c;所以有的网页不能用此种爬虫类型来获取页面的数据&#xff0c;只能用slef.crawl()来发起http请求来抓取数据。 直接上例子&#xff1a; 可以…

动作捕捉系统通过SDK与LabVIEW通信

运动分析、VR、机器人等应用中常使用LabVIEW对动作捕捉数据进行实时解算。NOKOV度量动作捕捉系统支持通过SDK与LabVIEW进行通信&#xff0c;将动作数据传入LabVIEW。 一、软件设置 1、形影软件设置 1、将模式切换到后处理模式 2、加载一个刚体数据 3、打开软件设置 4、选择网…

学习笔记:利用CANOE Panel和CAPL脚本模拟主节点发送LIN通信指令

前一篇文章已经对CANOE如何模拟主节点和从节点进行LIN通信做了简单的记录&#xff0c;修改主节点发送的指令需要修改LIN ISC模块里的Frames帧对应的signal。这样改起来比较麻烦且不直观&#xff0c;幸好CANOE提供了Panel designer这样的工具&#xff0c;我们可以利用它设计自己…

数组的存储结构、特殊矩阵和稀疏矩阵的压缩存储

数组的存储结构、特殊矩阵和稀疏矩阵的压缩存储 1.数组的存储结构、特殊矩阵、稀疏矩阵的压缩存储1.1 数组的存储结构1.1.1 一维数组的存储结构关系式1.1.2 多维数组的存储结构关系式 1.2 特殊矩阵的压缩存储1.2.1 对称矩阵1.2.2 下三角矩阵1.2.3 上三角矩阵1.2.4 三对角矩阵 1…

Window10安装Docker

文章目录 Window10安装Docker前提条件Hyper -VWSL 2.0 安装包下载执行安装包更新 Window10安装Docker 前提条件 Hyper -V 如何启用 WSL 2.0 安装包下载 官网地址 下载后&#xff1a; 执行安装包 wsl --update等得有点久 重新打开 拉取一个helloworld镜像 说明已经…

大数据学习之一文学会Spark【Spark知识点总结】

文章目录 什么是SparkSpark的特点Spark vs HadoopSparkHadoopSpark集群安装部署Spark集群安装部署StandaloneON YARN Spark的工作原理什么是RDDRDD的特点Spark架构相关进程Spark架构原理 Spark实战&#xff1a;单词统计Scala代码开发java代码开发任务提交 Transformation与Acti…

vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案

文章目录 前情提要bug回顾解决方案最后 前情提要 说起来很耻辱&#xff0c;从mac环境换到window环境&#xff0c;vscode的配置都是云端更新过来的&#xff0c;应该是一切正常才对&#xff0c;奇怪的是我的项目环境出现问题了&#xff0c;关于组件的ts和追踪都没有效果&#xff…

【JMeter】定时器分类以及场景介绍

1. 定时器分类 固定定时器 作用&#xff1a;请求之间设置等待时间应用场景&#xff1a;查询商品列表后&#xff0c;去查看列表商品详情页。针对商品列表数据量比较大的&#xff0c;响应时间会比较长&#xff0c;就需要设置等待时间然后去查看商详 2.定时器的作用域&#xff1…

【终端目标检测03】nanodet训练自己的数据集、NCNN部署到Android

nanodet训练自己的数据集、NCNN部署到Android 一、介绍二、训练自己的数据集1. 运行环境2. 数据集3. 配置文件4. 训练5. 训练可视化6. 测试 三、部署到android1. 使用官方权重文件部署1.1 下载权重文件1.2 使用Android Studio部署apk 2. 部署自己的模型【暂时存在问题】2.1 生成…

SpringBoot 整合RabbitMQ 之延迟队列实验

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 第七章 Spring Cloud 之 GateWay 第八章 Sprin…