Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
Your Name
|
e01e5bddc4 | 6 months ago |
|
Your Name
|
188eba911c | 7 months ago |
29 changed files with 1972 additions and 235 deletions
@ -1,99 +1,267 @@ |
|||||||
{ |
{ |
||||||
"nodes": [ |
"nodes": [ |
||||||
{ "id": "node1", "label": "计算机", "color": "#4682B4" }, |
{ "id": "node1", "label": "计算机", "color": "#4682B4", "classID": 0 }, |
||||||
{ "id": "node2", "label": "前端", "color": "rgba(254, 241, 0, 1)" }, |
{ |
||||||
{ "id": "node3", "label": "js", "color": "rgba(239, 242, 18, 1)" }, |
"id": "node2", |
||||||
{ "id": "node4", "label": "html", "color": "rgba(230, 234, 10, 1)" }, |
"label": "前端", |
||||||
{ "id": "node5", "label": "css", "color": "rgba(244, 231, 0, 1)" }, |
"color": "rgba(254, 241, 0, 1)", |
||||||
{ "id": "node6", "label": "less", "color": "rgba(15, 245, 57, 1)" }, |
"classID": 1 |
||||||
{ "id": "node7", "label": "scss", "color": "rgba(133, 255, 11, 1)" }, |
}, |
||||||
{ "id": "node8", "label": "VUE", "color": "rgba(42, 255, 0, 1)" }, |
{ |
||||||
{ "id": "node9", "label": "React", "color": "rgba(76, 73, 245, 1)" }, |
"id": "node3", |
||||||
{ "id": "node10", "label": "模块化", "color": "#4682B4" }, |
"label": "js", |
||||||
{ "id": "node11", "label": "webpack", "color": "#4682B4" }, |
"color": "rgba(239, 242, 18, 1)", |
||||||
{ "id": "node12", "label": "vite", "color": "#4682B4" }, |
"classID": 2 |
||||||
{ "id": "node13", "label": "uniapp", "color": "rgba(77, 255, 0, 1)" }, |
}, |
||||||
{ "id": "node14", "label": "element", "color": "rgba(33, 162, 255, 1)" }, |
{ |
||||||
{ "id": "node15", "label": "web3", "color": "rgba(255, 0, 251, 1)" }, |
"id": "node4", |
||||||
{ "id": "node16", "label": "webGl", "color": "rgba(208, 0, 249, 1)" }, |
"label": "html", |
||||||
{ "id": "node17", "label": "three", "color": "rgba(225, 0, 255, 1)" }, |
"color": "rgba(230, 234, 10, 1)", |
||||||
{ "id": "node18", "label": "后端", "color": "rgba(0, 229, 255, 1)" }, |
"classID": 3 |
||||||
{ "id": "node19", "label": "java", "color": "rgba(237, 229, 85, 1)" }, |
}, |
||||||
{ "id": "node20", "label": "PHP", "color": "rgba(195, 206, 215, 1)" }, |
{ |
||||||
{ "id": "node21", "label": "Go", "color": "rgba(255, 0, 0, 1)" }, |
"id": "node5", |
||||||
{ "id": "node22", "label": "Python", "color": "rgba(109, 238, 180, 1)" }, |
"label": "css", |
||||||
{ "id": "node23", "label": "MySQL", "color": "#4682B4" }, |
"color": "rgba(244, 231, 0, 1)", |
||||||
{ "id": "node24", "label": "人工智能", "color": "rgba(180, 5, 255, 1)" }, |
"classID": 4 |
||||||
{ "id": "node25", "label": "python", "color": "rgba(255, 8, 8, 1)" }, |
}, |
||||||
{ "id": "node26", "label": "AI模型", "color": "rgba(10, 138, 244, 1)" }, |
{ |
||||||
{ |
"id": "node6", |
||||||
"id": "node27", |
"label": "less", |
||||||
"label": "Spring Framework", |
"color": "rgba(15, 245, 57, 1)", |
||||||
"color": "rgba(242, 238, 14, 1)" |
"classID": 5 |
||||||
}, |
}, |
||||||
{ "id": "node29", "label": "Hibernate", "color": "rgba(242, 238, 14, 1)" }, |
{ |
||||||
{ "id": "node31", "label": "Spring MVC", "color": "rgba(242, 238, 14, 1)" }, |
"id": "node7", |
||||||
{ "id": "node33", "label": "Gin", "color": "rgba(255, 0, 0, 1)" }, |
"label": "scss", |
||||||
{ "id": "node34", "label": "Echo", "color": "rgba(255, 0, 0, 1)" }, |
"color": "rgba(133, 255, 11, 1)", |
||||||
{ "id": "node35", "label": "Beego", "color": "rgba(255, 8, 0, 1)" }, |
"classID": 6 |
||||||
{ "id": "node36", "label": "Laravel", "color": "rgba(200, 209, 217, 1)" }, |
}, |
||||||
{ "id": "node37", "label": "Symfony", "color": "rgba(182, 194, 204, 1)" }, |
{ |
||||||
{ |
"id": "node8", |
||||||
"id": "node38", |
"label": "VUE", |
||||||
"label": "CodeIgniter", |
"color": "rgba(42, 255, 0, 1)", |
||||||
"color": "rgba(188, 197, 204, 1)" |
"classID": 7 |
||||||
}, |
}, |
||||||
{ "id": "node39", "label": "Django", "color": "rgba(36, 245, 144, 1)" }, |
{ |
||||||
{ "id": "node40", "label": "Flask", "color": "rgba(41, 244, 176, 1)" }, |
"id": "node9", |
||||||
{ "id": "node41", "label": "FastAPI", "color": "rgba(58, 244, 142, 1)" } |
"label": "React", |
||||||
], |
"color": "rgba(76, 73, 245, 1)", |
||||||
"links": [ |
"classID": 8 |
||||||
{ "source": "node2", "target": "node3", "label": "" }, |
}, |
||||||
{ "source": "node2", "target": "node5", "label": "" }, |
{ "id": "node10", "label": "模块化", "color": "#4682B4", "classID": 9 }, |
||||||
{ "source": "node2", "target": "node4", "label": "" }, |
{ "id": "node11", "label": "webpack", "color": "#4682B4", "classID": 10 }, |
||||||
{ "source": "node1", "target": "node2", "label": "" }, |
{ "id": "node12", "label": "vite", "color": "#4682B4", "classID": 11 }, |
||||||
{ "source": "node5", "target": "node6", "label": "" }, |
{ |
||||||
{ "source": "node5", "target": "node7", "label": "" }, |
"id": "node13", |
||||||
{ "source": "node3", "target": "node8", "label": "" }, |
"label": "uniapp", |
||||||
{ "source": "node3", "target": "node9", "label": "" }, |
"color": "rgba(77, 255, 0, 1)", |
||||||
{ "source": "node3", "target": "node10", "label": "" }, |
"classID": 12 |
||||||
{ "source": "node10", "target": "node11", "label": "" }, |
}, |
||||||
{ "source": "node10", "target": "node12", "label": "" }, |
{ |
||||||
{ "source": "node11", "target": "node9", "label": "" }, |
"id": "node14", |
||||||
{ "source": "node11", "target": "node8", "label": "" }, |
"label": "element", |
||||||
{ "source": "node12", "target": "node8", "label": "" }, |
"color": "rgba(33, 162, 255, 1)", |
||||||
{ "source": "node8", "target": "node13", "label": "" }, |
"classID": 13 |
||||||
{ "source": "node8", "target": "node14", "label": "" }, |
}, |
||||||
{ "source": "node11", "target": "node13", "label": "" }, |
{ |
||||||
{ "source": "node12", "target": "node13", "label": "" }, |
"id": "node15", |
||||||
{ "source": "node2", "target": "node15", "label": "" }, |
"label": "web3", |
||||||
{ "source": "node15", "target": "node16", "label": "" }, |
"color": "rgba(255, 0, 251, 1)", |
||||||
{ "source": "node16", "target": "node17", "label": "" }, |
"classID": 14 |
||||||
{ "source": "node1", "target": "node1", "label": "" }, |
}, |
||||||
{ "source": "node1", "target": "node18", "label": "" }, |
{ |
||||||
{ "source": "node18", "target": "node21", "label": "" }, |
"id": "node16", |
||||||
{ "source": "node18", "target": "node20", "label": "" }, |
"label": "webGl", |
||||||
{ "source": "node18", "target": "node19", "label": "" }, |
"color": "rgba(208, 0, 249, 1)", |
||||||
{ "source": "node18", "target": "node22", "label": "" }, |
"classID": 15 |
||||||
{ "source": "node22", "target": "node23", "label": "" }, |
}, |
||||||
{ "source": "node19", "target": "node23", "label": "" }, |
{ |
||||||
{ "source": "node20", "target": "node23", "label": "" }, |
"id": "node17", |
||||||
{ "source": "node21", "target": "node23", "label": "" }, |
"label": "three", |
||||||
{ "source": "node1", "target": "node24", "label": "" }, |
"color": "rgba(225, 0, 255, 1)", |
||||||
{ "source": "node24", "target": "node25", "label": "" }, |
"classID": 16 |
||||||
{ "source": "node24", "target": "node26", "label": "" }, |
}, |
||||||
{ "source": "node12", "target": "node9", "label": "" }, |
{ |
||||||
{ "source": "node19", "target": "node27", "label": "" }, |
"id": "node18", |
||||||
{ "source": "node19", "target": "node29", "label": "" }, |
"label": "后端", |
||||||
{ "source": "node19", "target": "node31", "label": "" }, |
"color": "rgba(0, 229, 255, 1)", |
||||||
{ "source": "node21", "target": "node33", "label": "" }, |
"classID": 17 |
||||||
{ "source": "node21", "target": "node34", "label": "" }, |
}, |
||||||
{ "source": "node21", "target": "node35", "label": "" }, |
{ |
||||||
{ "source": "node20", "target": "node36", "label": "" }, |
"id": "node19", |
||||||
{ "source": "node20", "target": "node37", "label": "" }, |
"label": "java", |
||||||
{ "source": "node20", "target": "node38", "label": "" }, |
"color": "rgba(237, 229, 85, 1)", |
||||||
{ "source": "node22", "target": "node39", "label": "" }, |
"classID": 18 |
||||||
{ "source": "node22", "target": "node40", "label": "" }, |
}, |
||||||
{ "source": "node22", "target": "node41", "label": "" } |
{ |
||||||
] |
"id": "node20", |
||||||
} |
"label": "PHP", |
||||||
|
"color": "rgba(195, 206, 215, 1)", |
||||||
|
"classID": 19 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node21", |
||||||
|
"label": "Go", |
||||||
|
"color": "rgba(255, 0, 0, 1)", |
||||||
|
"classID": 20 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node22", |
||||||
|
"label": "Python", |
||||||
|
"color": "rgba(109, 238, 180, 1)", |
||||||
|
"classID": 21 |
||||||
|
}, |
||||||
|
{ "id": "node23", "label": "MySQL", "color": "#4682B4", "classID": 22 }, |
||||||
|
{ |
||||||
|
"id": "node24", |
||||||
|
"label": "人工智能", |
||||||
|
"color": "rgba(180, 5, 255, 1)", |
||||||
|
"classID": 23 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node25", |
||||||
|
"label": "python", |
||||||
|
"color": "rgba(255, 8, 8, 1)", |
||||||
|
"classID": 24 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node26", |
||||||
|
"label": "AI模型", |
||||||
|
"color": "rgba(10, 138, 244, 1)", |
||||||
|
"classID": 25 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node27", |
||||||
|
"label": "Spring Framework", |
||||||
|
"color": "rgba(242, 238, 14, 1)", |
||||||
|
"classID": 26 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node28", |
||||||
|
"label": "Hibernate", |
||||||
|
"color": "rgba(242, 238, 14, 1)", |
||||||
|
"classID": 27 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node29", |
||||||
|
"label": "Spring MVC", |
||||||
|
"color": "rgba(242, 238, 14, 1)", |
||||||
|
"classID": 28 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node30", |
||||||
|
"label": "Gin", |
||||||
|
"color": "rgba(255, 0, 0, 1)", |
||||||
|
"classID": 29 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node31", |
||||||
|
"label": "Echo", |
||||||
|
"color": "rgba(255, 0, 0, 1)", |
||||||
|
"classID": 30 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node32", |
||||||
|
"label": "Beego", |
||||||
|
"color": "rgba(255, 8, 0, 1)", |
||||||
|
"classID": 31 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node33", |
||||||
|
"label": "Laravel", |
||||||
|
"color": "rgba(200, 209, 217, 1)", |
||||||
|
"classID": 32 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node34", |
||||||
|
"label": "Symfony", |
||||||
|
"color": "rgba(182, 194, 204, 1)", |
||||||
|
"classID": 33 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node35", |
||||||
|
"label": "CodeIgniter", |
||||||
|
"color": "rgba(188, 197, 204, 1)", |
||||||
|
"classID": 34 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node36", |
||||||
|
"label": "Django", |
||||||
|
"color": "rgba(36, 245, 144, 1)", |
||||||
|
"classID": 35 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node37", |
||||||
|
"label": "Flask", |
||||||
|
"color": "rgba(41, 244, 176, 1)", |
||||||
|
"classID": 36 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "node38", |
||||||
|
"label": "FastAPI", |
||||||
|
"color": "rgba(58, 244, 142, 1)", |
||||||
|
"classID": 37 |
||||||
|
} |
||||||
|
], |
||||||
|
"links": [ |
||||||
|
{ "source": "node2", "target": "node3", "label": "", "classID": 0 }, |
||||||
|
{ "source": "node2", "target": "node5", "label": "", "classID": 1 }, |
||||||
|
{ "source": "node2", "target": "node4", "label": "", "classID": 2 }, |
||||||
|
{ "source": "node1", "target": "node2", "label": "前端方向", "classID": 3 }, |
||||||
|
{ "source": "node5", "target": "node6", "label": "", "classID": 4 }, |
||||||
|
{ "source": "node5", "target": "node7", "label": "", "classID": 5 }, |
||||||
|
{ "source": "node3", "target": "node8", "label": "", "classID": 6 }, |
||||||
|
{ "source": "node3", "target": "node9", "label": "", "classID": 7 }, |
||||||
|
{ "source": "node3", "target": "node10", "label": "", "classID": 8 }, |
||||||
|
{ "source": "node10", "target": "node11", "label": "", "classID": 9 }, |
||||||
|
{ "source": "node10", "target": "node12", "label": "", "classID": 10 }, |
||||||
|
{ "source": "node11", "target": "node9", "label": "", "classID": 11 }, |
||||||
|
{ "source": "node11", "target": "node8", "label": "", "classID": 12 }, |
||||||
|
{ "source": "node12", "target": "node8", "label": "", "classID": 13 }, |
||||||
|
{ "source": "node8", "target": "node13", "label": "", "classID": 14 }, |
||||||
|
{ "source": "node8", "target": "node14", "label": "", "classID": 15 }, |
||||||
|
{ "source": "node11", "target": "node13", "label": "", "classID": 16 }, |
||||||
|
{ "source": "node12", "target": "node13", "label": "", "classID": 17 }, |
||||||
|
{ "source": "node2", "target": "node15", "label": "", "classID": 18 }, |
||||||
|
{ "source": "node15", "target": "node16", "label": "", "classID": 19 }, |
||||||
|
{ "source": "node16", "target": "node17", "label": "", "classID": 20 }, |
||||||
|
{ "source": "node1", "target": "node1", "label": "", "classID": 21 }, |
||||||
|
{ |
||||||
|
"source": "node1", |
||||||
|
"target": "node18", |
||||||
|
"label": "后端方向", |
||||||
|
"classID": 22 |
||||||
|
}, |
||||||
|
{ "source": "node18", "target": "node21", "label": "", "classID": 23 }, |
||||||
|
{ "source": "node18", "target": "node20", "label": "", "classID": 24 }, |
||||||
|
{ "source": "node18", "target": "node19", "label": "", "classID": 25 }, |
||||||
|
{ "source": "node18", "target": "node22", "label": "", "classID": 26 }, |
||||||
|
{ "source": "node22", "target": "node23", "label": "", "classID": 27 }, |
||||||
|
{ "source": "node19", "target": "node23", "label": "", "classID": 28 }, |
||||||
|
{ "source": "node20", "target": "node23", "label": "", "classID": 29 }, |
||||||
|
{ "source": "node21", "target": "node23", "label": "", "classID": 30 }, |
||||||
|
{ |
||||||
|
"source": "node1", |
||||||
|
"target": "node24", |
||||||
|
"label": "人工智能方向", |
||||||
|
"classID": 31 |
||||||
|
}, |
||||||
|
{ "source": "node24", "target": "node25", "label": "", "classID": 32 }, |
||||||
|
{ "source": "node24", "target": "node26", "label": "", "classID": 33 }, |
||||||
|
{ "source": "node12", "target": "node9", "label": "", "classID": 34 }, |
||||||
|
{ "source": "node19", "target": "node27", "label": "", "classID": 35 }, |
||||||
|
{ "source": "node19", "target": "node28", "label": "", "classID": 36 }, |
||||||
|
{ "source": "node19", "target": "node29", "label": "", "classID": 37 }, |
||||||
|
{ "source": "node21", "target": "node30", "label": "", "classID": 38 }, |
||||||
|
{ "source": "node21", "target": "node31", "label": "", "classID": 39 }, |
||||||
|
{ "source": "node21", "target": "node32", "label": "", "classID": 40 }, |
||||||
|
{ "source": "node20", "target": "node33", "label": "", "classID": 41 }, |
||||||
|
{ "source": "node20", "target": "node34", "label": "", "classID": 42 }, |
||||||
|
{ "source": "node20", "target": "node35", "label": "", "classID": 43 }, |
||||||
|
{ "source": "node22", "target": "node36", "label": "", "classID": 44 }, |
||||||
|
{ "source": "node22", "target": "node37", "label": "", "classID": 45 }, |
||||||
|
{ "source": "node22", "target": "node38", "label": "", "classID": 46 } |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 935 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 882 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 848 B |
|
After Width: | Height: | Size: 36 KiB |
@ -0,0 +1,151 @@ |
|||||||
|
<template> |
||||||
|
<div id="3d-graph"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
// import { useRouter } from 'vue-router' |
||||||
|
import { onMounted, ref,reactive } from 'vue' |
||||||
|
import ForceGraph3D from '3d-force-graph' |
||||||
|
//@ts-ignore |
||||||
|
import { CSS2DRenderer, CSS2DObject,} from 'three/examples/jsm/renderers/CSS2DRenderer.js' |
||||||
|
//@ts-ignore |
||||||
|
import SpriteText from '../spritetext.js' |
||||||
|
// const $router = useRouter() |
||||||
|
// const jsonData = ref(null) |
||||||
|
let Graph = reactive({}) |
||||||
|
const props = defineProps({ |
||||||
|
width:{ |
||||||
|
type:Number, |
||||||
|
default:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, |
||||||
|
}, |
||||||
|
height:{ |
||||||
|
type:Number, |
||||||
|
default:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, |
||||||
|
} |
||||||
|
}) |
||||||
|
const dom = ref(null) |
||||||
|
onMounted(() => { |
||||||
|
|
||||||
|
|
||||||
|
Graph = ForceGraph3D({ |
||||||
|
extraRenderers: [new CSS2DRenderer()], |
||||||
|
})(document.getElementById('3d-graph') as HTMLElement) |
||||||
|
.jsonUrl('../../../public/data.json') |
||||||
|
// .nodeAutoColorBy('group') |
||||||
|
.nodeThreeObject((node: any) => { |
||||||
|
const nodeEl = document.createElement('div') |
||||||
|
nodeEl.textContent = node.label |
||||||
|
nodeEl.style.color = '#333333' |
||||||
|
nodeEl.style.borderRadius = '50%' |
||||||
|
// console.log(node, 111, Graph.graphData().nodes) |
||||||
|
return new CSS2DObject(nodeEl) |
||||||
|
}) |
||||||
|
.linkLabel((link:any) => link.label) // 指定链接上显示的文字属性 |
||||||
|
.linkWidth(0.8) |
||||||
|
.linkHoverPrecision(0.5) // 设置链接文字的显示精度，这里设置为一个足够小的值 |
||||||
|
.linkColor(() => '#dd92fd') // 设置连接线颜色为红色 |
||||||
|
.backgroundColor('#f5f6fd') |
||||||
|
.width(props.width) |
||||||
|
.height(props.height) |
||||||
|
.linkThreeObjectExtend(true) |
||||||
|
.nodeColor((node: any) => { |
||||||
|
return node.color |
||||||
|
}) |
||||||
|
.nodeRelSize(7) // 设置节点的相对大小为4 |
||||||
|
.nodeResolution(20) |
||||||
|
.linkDirectionalArrowLength(3) // 设置连接线箭头长度为3 |
||||||
|
.linkDirectionalArrowRelPos(1) // 设置连接线箭头位置为连接线末端 |
||||||
|
.nodeThreeObjectExtend(true) |
||||||
|
.onNodeClick((node: any) => { |
||||||
|
// Aim at node from outside it |
||||||
|
// 目标距离 |
||||||
|
const targetDistance = 200 // 设定一个一般的距离 |
||||||
|
|
||||||
|
// 计算相机新位置 |
||||||
|
const distRatio = 1 + targetDistance / Math.hypot(node.x, node.y, node.z) |
||||||
|
const newPos = { |
||||||
|
x: node.x * distRatio, |
||||||
|
y: node.y * distRatio, |
||||||
|
z: node.z * distRatio, |
||||||
|
} |
||||||
|
|
||||||
|
// 如果节点位于原点，则特殊处理 |
||||||
|
if (node.x === 0 && node.y === 0 && node.z === 0) { |
||||||
|
newPos.z = targetDistance // 将 z 轴设定为目标距离 |
||||||
|
} |
||||||
|
|
||||||
|
// 移动相机至新位置 |
||||||
|
//@ts-ignore |
||||||
|
Graph.cameraPosition( |
||||||
|
newPos, // 新位置 |
||||||
|
node, // 视角焦点 |
||||||
|
3000, // 过渡时长 |
||||||
|
) |
||||||
|
|
||||||
|
// 获取图表数据 |
||||||
|
//@ts-ignore |
||||||
|
const graphData = Graph.graphData() |
||||||
|
|
||||||
|
// 遍历连接线，检查每条连接线的起点和终点是否与当前点击的节点相关联 |
||||||
|
graphData.links.forEach((link: any) => { |
||||||
|
// console.log(link); |
||||||
|
|
||||||
|
if (link.source.id === node.id || link.target.id === node.id) { |
||||||
|
setLabel() |
||||||
|
// 将与当前点击节点相关联的连接线颜色设置为红色 |
||||||
|
// link.color = '#FF0000' // 设置连接线颜色为红色 |
||||||
|
//@ts-ignore |
||||||
|
Graph.linkColor((item: any): any => { |
||||||
|
if (item.source.id === node.id || item.target.id === node.id) { |
||||||
|
return 'red' |
||||||
|
} else { |
||||||
|
return '#dd92fd' |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
} else { |
||||||
|
// Graph.linkColor(() => '#a4c7fe') // 设置连接线颜色为红色 |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// 更新图形数据，以应用颜色变化 |
||||||
|
//@ts-ignore |
||||||
|
Graph.graphData(graphData) |
||||||
|
}) |
||||||
|
dom.value = document.querySelector('canvas') as any |
||||||
|
}) |
||||||
|
|
||||||
|
const setLabel = () => { |
||||||
|
//@ts-ignore |
||||||
|
Graph.linkThreeObject((link:any) => { |
||||||
|
// extend link with text sprite |
||||||
|
const sprite = new SpriteText(`${link.label}`); |
||||||
|
sprite.color = '#ccc'; |
||||||
|
sprite.textHeight = 1.5; |
||||||
|
return sprite; |
||||||
|
}) |
||||||
|
//@ts-ignore |
||||||
|
Graph.linkPositionUpdate((sprite, { start, end }) => { |
||||||
|
//@ts-ignore |
||||||
|
const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({ |
||||||
|
//@ts-ignore |
||||||
|
[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point |
||||||
|
}))); |
||||||
|
|
||||||
|
// Position sprite |
||||||
|
Object.assign(sprite.position, middlePos); |
||||||
|
}); |
||||||
|
//@ts-ignore |
||||||
|
Graph.d3Force('charge').strength(-120); |
||||||
|
} |
||||||
|
// const goToEditAtlas = () => { |
||||||
|
// console.log(jsonData.value) |
||||||
|
|
||||||
|
// $router.push({ name: 'EditAtlas', params: { id: 123 } }) |
||||||
|
// } |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='scss' scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,217 @@ |
|||||||
|
function newstypeonc(x) { |
||||||
|
al = document.getElementById('newstypenum').innerHTML |
||||||
|
for (i = 1; i < al; i++) { |
||||||
|
document.getElementById('newstypea' + i).className = '' |
||||||
|
document.getElementById('newsmain' + i).style.display = 'none' |
||||||
|
} |
||||||
|
document.getElementById('newstypea' + x).className = 'a1' |
||||||
|
document.getElementById('newsmain' + x).style.display = '' |
||||||
|
} |
||||||
|
|
||||||
|
function shopda() { |
||||||
|
t = document.getElementById('shopdat1').value |
||||||
|
if (t == '') { |
||||||
|
alert('请输入有效的QQ或手机号码') |
||||||
|
document.getElementById('shopdat1').select() |
||||||
|
return false |
||||||
|
} |
||||||
|
$.get( |
||||||
|
document.getElementById('webhttp').innerHTML + |
||||||
|
'tem/moban/ymk/tem/niushop.php', |
||||||
|
{ k: t }, |
||||||
|
function (result) { |
||||||
|
if (result == 'err1') { |
||||||
|
alert('没有找到对应的店铺') |
||||||
|
return false |
||||||
|
} else { |
||||||
|
location.href = |
||||||
|
document.getElementById('webhttp').innerHTML + |
||||||
|
'shop/view' + |
||||||
|
result + |
||||||
|
'.html' |
||||||
|
return false |
||||||
|
} |
||||||
|
}, |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function proaover(x) { |
||||||
|
for (i = 1; i < document.getElementById('protypenum').innerHTML; i++) { |
||||||
|
document.getElementById('promain' + i).style.display = 'none' |
||||||
|
document.getElementById('proa' + i).className = '' |
||||||
|
} |
||||||
|
document.getElementById('promain' + x).style.display = '' |
||||||
|
document.getElementById('proa' + x).className = 'a1' |
||||||
|
switch (x) { |
||||||
|
case 1: |
||||||
|
for (let i = 2; i <= 6; i++) { |
||||||
|
const N = 10 |
||||||
|
const gData = { |
||||||
|
nodes: [...Array(N).keys()].map((i) => ({ id: i })), |
||||||
|
links: [...Array(N).keys()] |
||||||
|
.filter((id) => id) |
||||||
|
.map((id) => ({ |
||||||
|
source: id, |
||||||
|
target: Math.round(Math.random() * (id - 1)), |
||||||
|
})), |
||||||
|
} |
||||||
|
const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i)) |
||||||
|
.width(200) |
||||||
|
.height(200) |
||||||
|
Graph.graphData(gData) |
||||||
|
} |
||||||
|
break |
||||||
|
case 2: |
||||||
|
for (let i = 8; i <= 12; i++) { |
||||||
|
const N = 10 |
||||||
|
const gData = { |
||||||
|
nodes: [...Array(N).keys()].map((i) => ({ id: i })), |
||||||
|
links: [...Array(N).keys()] |
||||||
|
.filter((id) => id) |
||||||
|
.map((id) => ({ |
||||||
|
source: id, |
||||||
|
target: Math.round(Math.random() * (id - 1)), |
||||||
|
})), |
||||||
|
} |
||||||
|
const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i)) |
||||||
|
.width(200) |
||||||
|
.height(200) |
||||||
|
Graph.graphData(gData) |
||||||
|
} |
||||||
|
break |
||||||
|
case 3: |
||||||
|
for (let i = 14; i <= 18; i++) { |
||||||
|
const N = 10 |
||||||
|
const gData = { |
||||||
|
nodes: [...Array(N).keys()].map((i) => ({ id: i })), |
||||||
|
links: [...Array(N).keys()] |
||||||
|
.filter((id) => id) |
||||||
|
.map((id) => ({ |
||||||
|
source: id, |
||||||
|
target: Math.round(Math.random() * (id - 1)), |
||||||
|
})), |
||||||
|
} |
||||||
|
const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i)) |
||||||
|
.width(200) |
||||||
|
.height(200) |
||||||
|
Graph.graphData(gData) |
||||||
|
} |
||||||
|
break |
||||||
|
case 4: |
||||||
|
for (let i = 20; i <= 24; i++) { |
||||||
|
const N = 10 |
||||||
|
const gData = { |
||||||
|
nodes: [...Array(N).keys()].map((i) => ({ id: i })), |
||||||
|
links: [...Array(N).keys()] |
||||||
|
.filter((id) => id) |
||||||
|
.map((id) => ({ |
||||||
|
source: id, |
||||||
|
target: Math.round(Math.random() * (id - 1)), |
||||||
|
})), |
||||||
|
} |
||||||
|
const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i)) |
||||||
|
.width(200) |
||||||
|
.height(200) |
||||||
|
Graph.graphData(gData) |
||||||
|
} |
||||||
|
break |
||||||
|
case 5: |
||||||
|
for (let i = 26; i <= 30; i++) { |
||||||
|
const N = 10 |
||||||
|
const gData = { |
||||||
|
nodes: [...Array(N).keys()].map((i) => ({ id: i })), |
||||||
|
links: [...Array(N).keys()] |
||||||
|
.filter((id) => id) |
||||||
|
.map((id) => ({ |
||||||
|
source: id, |
||||||
|
target: Math.round(Math.random() * (id - 1)), |
||||||
|
})), |
||||||
|
} |
||||||
|
const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i)) |
||||||
|
.width(200) |
||||||
|
.height(200) |
||||||
|
Graph.graphData(gData) |
||||||
|
} |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function serveover(x) { |
||||||
|
for (i = 1; i < 3; i++) { |
||||||
|
document.getElementById('servermain' + i).style.display = 'none' |
||||||
|
document.getElementById('servea' + i).className = '' |
||||||
|
} |
||||||
|
document.getElementById('servermain' + x).style.display = '' |
||||||
|
document.getElementById('servea' + x).className = 'a1' |
||||||
|
} |
||||||
|
|
||||||
|
function idldl() { |
||||||
|
$.get('tem/sesCheck.php', {}, function (result) { |
||||||
|
if (result == '0') { |
||||||
|
document.getElementById('u1no').style.display = '' |
||||||
|
document.getElementById('u1ok').style.display = 'none' |
||||||
|
} else { |
||||||
|
document.getElementById('u1no').style.display = 'none' |
||||||
|
document.getElementById('u1ok').style.display = '' |
||||||
|
a = result.split(' ') |
||||||
|
document.getElementById('itouxiang').src = a[3] |
||||||
|
document.getElementById('iuserid').innerHTML = a[0] |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
//切换
|
||||||
|
function banner() { |
||||||
|
var bn_id = 0 |
||||||
|
var bn_id2 = 1 |
||||||
|
var speed33 = 10000 |
||||||
|
var qhjg = 1 |
||||||
|
var MyMar33 |
||||||
|
$('#banner .d1').hide() |
||||||
|
$('#banner .d1').eq(0).fadeIn('slow') |
||||||
|
if ($('#banner .d1').length > 1) { |
||||||
|
$('#banner_id li').eq(0).addClass('nuw') |
||||||
|
function Marquee33() { |
||||||
|
bn_id2 = bn_id + 1 |
||||||
|
if (bn_id2 > $('#banner .d1').length - 1) { |
||||||
|
bn_id2 = 0 |
||||||
|
} |
||||||
|
$('#banner .d1').eq(bn_id).css('z-index', '2') |
||||||
|
$('#banner .d1').eq(bn_id2).css('z-index', '1') |
||||||
|
$('#banner .d1').eq(bn_id2).show() |
||||||
|
$('#banner .d1').eq(bn_id).fadeOut('slow') |
||||||
|
$('#banner_id li').removeClass('nuw') |
||||||
|
$('#banner_id li').eq(bn_id2).addClass('nuw') |
||||||
|
bn_id = bn_id2 |
||||||
|
} |
||||||
|
|
||||||
|
MyMar33 = setInterval(Marquee33, speed33) |
||||||
|
|
||||||
|
$('#banner_id li').click(function () { |
||||||
|
var bn_id3 = $('#banner_id li').index(this) |
||||||
|
if (bn_id3 != bn_id && qhjg == 1) { |
||||||
|
qhjg = 0 |
||||||
|
$('#banner .d1').eq(bn_id).css('z-index', '2') |
||||||
|
$('#banner .d1').eq(bn_id3).css('z-index', '1') |
||||||
|
$('#banner .d1').eq(bn_id3).show() |
||||||
|
$('#banner .d1') |
||||||
|
.eq(bn_id) |
||||||
|
.fadeOut('slow', function () { |
||||||
|
qhjg = 1 |
||||||
|
}) |
||||||
|
$('#banner_id li').removeClass('nuw') |
||||||
|
$('#banner_id li').eq(bn_id3).addClass('nuw') |
||||||
|
bn_id = bn_id3 |
||||||
|
} |
||||||
|
}) |
||||||
|
$('#banner_id').hover( |
||||||
|
function () { |
||||||
|
clearInterval(MyMar33) |
||||||
|
}, |
||||||
|
function () { |
||||||
|
MyMar33 = setInterval(Marquee33, speed33) |
||||||
|
}, |
||||||
|
) |
||||||
|
} else { |
||||||
|
$('#banner_id').hide() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,71 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<professionalProfile /> |
||||||
|
<div class="setting-box"> |
||||||
|
<div class="goto" @click="back">返回</div> |
||||||
|
<div class="goto" @click="logImage">打印</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
// import { ref } from 'vue' |
||||||
|
import professionalProfile from './components/KnowledgeGraph.vue' |
||||||
|
const $router = useRouter() |
||||||
|
const back = () => { |
||||||
|
$router.go(-1) |
||||||
|
} |
||||||
|
const logImage = () => { |
||||||
|
window.print(); |
||||||
|
return |
||||||
|
console.log(document.querySelector('canvas')) |
||||||
|
// 获取 Canvas 元素 |
||||||
|
const canvas = document.querySelector('canvas') as any |
||||||
|
// 创建一个链接元素 |
||||||
|
setTimeout(() => { |
||||||
|
const downloadLink = document.createElement('a') |
||||||
|
|
||||||
|
// 将 Canvas 转换为数据 URL |
||||||
|
const dataURL = canvas.toDataURL('image/png') |
||||||
|
console.log(dataURL); |
||||||
|
|
||||||
|
|
||||||
|
// 设置链接的 href 属性为数据 URL |
||||||
|
downloadLink.href = dataURL |
||||||
|
|
||||||
|
// 设置链接的下载属性和文件名 |
||||||
|
downloadLink.download = 'canvas_image.png' |
||||||
|
|
||||||
|
// 将链接添加到文档中 |
||||||
|
document.body.appendChild(downloadLink) |
||||||
|
|
||||||
|
// 触发链接的点击事件来下载图片 |
||||||
|
downloadLink.click() |
||||||
|
|
||||||
|
// 下载完成后移除链接 |
||||||
|
document.body.removeChild(downloadLink) |
||||||
|
}, 1000); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.setting-box { |
||||||
|
position: absolute; |
||||||
|
top: 30px; |
||||||
|
right: 30px; |
||||||
|
z-index: 999; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.goto { |
||||||
|
background-color: #e2d5e7; |
||||||
|
width: 60px; |
||||||
|
height: 30px; |
||||||
|
text-align: center; |
||||||
|
line-height: 30px; |
||||||
|
color: #fff; |
||||||
|
border-radius: 10px; |
||||||
|
margin: 0 10px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,468 @@ |
|||||||
|
import { LinearFilter, Sprite, SpriteMaterial, SRGBColorSpace, Texture } from 'three'; |
||||||
|
|
||||||
|
function _callSuper(t, o, e) { |
||||||
|
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); |
||||||
|
} |
||||||
|
function _isNativeReflectConstruct() { |
||||||
|
try { |
||||||
|
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); |
||||||
|
} catch (t) {} |
||||||
|
return (_isNativeReflectConstruct = function () { |
||||||
|
return !!t; |
||||||
|
})(); |
||||||
|
} |
||||||
|
function _iterableToArrayLimit(r, l) { |
||||||
|
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; |
||||||
|
if (null != t) { |
||||||
|
var e, |
||||||
|
n, |
||||||
|
i, |
||||||
|
u, |
||||||
|
a = [], |
||||||
|
f = !0, |
||||||
|
o = !1; |
||||||
|
try { |
||||||
|
if (i = (t = t.call(r)).next, 0 === l) { |
||||||
|
if (Object(t) !== t) return; |
||||||
|
f = !1; |
||||||
|
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); |
||||||
|
} catch (r) { |
||||||
|
o = !0, n = r; |
||||||
|
} finally { |
||||||
|
try { |
||||||
|
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; |
||||||
|
} finally { |
||||||
|
if (o) throw n; |
||||||
|
} |
||||||
|
} |
||||||
|
return a; |
||||||
|
} |
||||||
|
} |
||||||
|
function _toPrimitive(t, r) { |
||||||
|
if ("object" != typeof t || !t) return t; |
||||||
|
var e = t[Symbol.toPrimitive]; |
||||||
|
if (void 0 !== e) { |
||||||
|
var i = e.call(t, r || "default"); |
||||||
|
if ("object" != typeof i) return i; |
||||||
|
throw new TypeError("@@toPrimitive must return a primitive value."); |
||||||
|
} |
||||||
|
return ("string" === r ? String : Number)(t); |
||||||
|
} |
||||||
|
function _toPropertyKey(t) { |
||||||
|
var i = _toPrimitive(t, "string"); |
||||||
|
return "symbol" == typeof i ? i : String(i); |
||||||
|
} |
||||||
|
function _classCallCheck(instance, Constructor) { |
||||||
|
if (!(instance instanceof Constructor)) { |
||||||
|
throw new TypeError("Cannot call a class as a function"); |
||||||
|
} |
||||||
|
} |
||||||
|
function _defineProperties(target, props) { |
||||||
|
for (var i = 0; i < props.length; i++) { |
||||||
|
var descriptor = props[i]; |
||||||
|
descriptor.enumerable = descriptor.enumerable || false; |
||||||
|
descriptor.configurable = true; |
||||||
|
if ("value" in descriptor) descriptor.writable = true; |
||||||
|
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); |
||||||
|
} |
||||||
|
} |
||||||
|
function _createClass(Constructor, protoProps, staticProps) { |
||||||
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps); |
||||||
|
if (staticProps) _defineProperties(Constructor, staticProps); |
||||||
|
Object.defineProperty(Constructor, "prototype", { |
||||||
|
writable: false |
||||||
|
}); |
||||||
|
return Constructor; |
||||||
|
} |
||||||
|
function _inherits(subClass, superClass) { |
||||||
|
if (typeof superClass !== "function" && superClass !== null) { |
||||||
|
throw new TypeError("Super expression must either be null or a function"); |
||||||
|
} |
||||||
|
subClass.prototype = Object.create(superClass && superClass.prototype, { |
||||||
|
constructor: { |
||||||
|
value: subClass, |
||||||
|
writable: true, |
||||||
|
configurable: true |
||||||
|
} |
||||||
|
}); |
||||||
|
Object.defineProperty(subClass, "prototype", { |
||||||
|
writable: false |
||||||
|
}); |
||||||
|
if (superClass) _setPrototypeOf(subClass, superClass); |
||||||
|
} |
||||||
|
function _getPrototypeOf(o) { |
||||||
|
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { |
||||||
|
return o.__proto__ || Object.getPrototypeOf(o); |
||||||
|
}; |
||||||
|
return _getPrototypeOf(o); |
||||||
|
} |
||||||
|
function _setPrototypeOf(o, p) { |
||||||
|
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { |
||||||
|
o.__proto__ = p; |
||||||
|
return o; |
||||||
|
}; |
||||||
|
return _setPrototypeOf(o, p); |
||||||
|
} |
||||||
|
function _assertThisInitialized(self) { |
||||||
|
if (self === void 0) { |
||||||
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); |
||||||
|
} |
||||||
|
return self; |
||||||
|
} |
||||||
|
function _possibleConstructorReturn(self, call) { |
||||||
|
if (call && (typeof call === "object" || typeof call === "function")) { |
||||||
|
return call; |
||||||
|
} else if (call !== void 0) { |
||||||
|
throw new TypeError("Derived constructors may only return object or undefined"); |
||||||
|
} |
||||||
|
return _assertThisInitialized(self); |
||||||
|
} |
||||||
|
function _slicedToArray(arr, i) { |
||||||
|
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); |
||||||
|
} |
||||||
|
function _toConsumableArray(arr) { |
||||||
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); |
||||||
|
} |
||||||
|
function _arrayWithoutHoles(arr) { |
||||||
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr); |
||||||
|
} |
||||||
|
function _arrayWithHoles(arr) { |
||||||
|
if (Array.isArray(arr)) return arr; |
||||||
|
} |
||||||
|
function _iterableToArray(iter) { |
||||||
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); |
||||||
|
} |
||||||
|
function _unsupportedIterableToArray(o, minLen) { |
||||||
|
if (!o) return; |
||||||
|
if (typeof o === "string") return _arrayLikeToArray(o, minLen); |
||||||
|
var n = Object.prototype.toString.call(o).slice(8, -1); |
||||||
|
if (n === "Object" && o.constructor) n = o.constructor.name; |
||||||
|
if (n === "Map" || n === "Set") return Array.from(o); |
||||||
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); |
||||||
|
} |
||||||
|
function _arrayLikeToArray(arr, len) { |
||||||
|
if (len == null || len > arr.length) len = arr.length; |
||||||
|
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; |
||||||
|
return arr2; |
||||||
|
} |
||||||
|
function _nonIterableSpread() { |
||||||
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); |
||||||
|
} |
||||||
|
function _nonIterableRest() { |
||||||
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); |
||||||
|
} |
||||||
|
|
||||||
|
var three = typeof window !== 'undefined' && window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
|
||||||
|
: { |
||||||
|
LinearFilter: LinearFilter, |
||||||
|
Sprite: Sprite, |
||||||
|
SpriteMaterial: SpriteMaterial, |
||||||
|
SRGBColorSpace: SRGBColorSpace, |
||||||
|
Texture: Texture |
||||||
|
}; |
||||||
|
var _default = /*#__PURE__*/function (_three$Sprite) { |
||||||
|
_inherits(_default, _three$Sprite); |
||||||
|
function _default() { |
||||||
|
var _this; |
||||||
|
var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; |
||||||
|
var textHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10; |
||||||
|
var color = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 1)'; |
||||||
|
_classCallCheck(this, _default); |
||||||
|
_this = _callSuper(this, _default, [new three.SpriteMaterial()]); |
||||||
|
_this._text = "".concat(text); |
||||||
|
_this._textHeight = textHeight; |
||||||
|
_this._color = color; |
||||||
|
_this._backgroundColor = false; // no background color
|
||||||
|
|
||||||
|
_this._padding = 0; |
||||||
|
_this._borderWidth = 0; |
||||||
|
_this._borderRadius = 0; |
||||||
|
_this._borderColor = 'white'; |
||||||
|
_this._strokeWidth = 0; |
||||||
|
_this._strokeColor = 'white'; |
||||||
|
_this._fontFace = 'system-ui'; |
||||||
|
_this._fontSize = 90; // defines text resolution
|
||||||
|
_this._fontWeight = 'normal'; |
||||||
|
_this._canvas = document.createElement('canvas'); |
||||||
|
_this._genCanvas(); |
||||||
|
return _this; |
||||||
|
} |
||||||
|
_createClass(_default, [{ |
||||||
|
key: "text", |
||||||
|
get: function get() { |
||||||
|
return this._text; |
||||||
|
}, |
||||||
|
set: function set(text) { |
||||||
|
this._text = text; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "textHeight", |
||||||
|
get: function get() { |
||||||
|
return this._textHeight; |
||||||
|
}, |
||||||
|
set: function set(textHeight) { |
||||||
|
this._textHeight = textHeight; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "color", |
||||||
|
get: function get() { |
||||||
|
return this._color; |
||||||
|
}, |
||||||
|
set: function set(color) { |
||||||
|
this._color = color; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "backgroundColor", |
||||||
|
get: function get() { |
||||||
|
return this._backgroundColor; |
||||||
|
}, |
||||||
|
set: function set(color) { |
||||||
|
this._backgroundColor = color; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "padding", |
||||||
|
get: function get() { |
||||||
|
return this._padding; |
||||||
|
}, |
||||||
|
set: function set(padding) { |
||||||
|
this._padding = padding; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "borderWidth", |
||||||
|
get: function get() { |
||||||
|
return this._borderWidth; |
||||||
|
}, |
||||||
|
set: function set(borderWidth) { |
||||||
|
this._borderWidth = borderWidth; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "borderRadius", |
||||||
|
get: function get() { |
||||||
|
return this._borderRadius; |
||||||
|
}, |
||||||
|
set: function set(borderRadius) { |
||||||
|
this._borderRadius = borderRadius; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "borderColor", |
||||||
|
get: function get() { |
||||||
|
return this._borderColor; |
||||||
|
}, |
||||||
|
set: function set(borderColor) { |
||||||
|
this._borderColor = borderColor; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "fontFace", |
||||||
|
get: function get() { |
||||||
|
return this._fontFace; |
||||||
|
}, |
||||||
|
set: function set(fontFace) { |
||||||
|
this._fontFace = fontFace; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "fontSize", |
||||||
|
get: function get() { |
||||||
|
return this._fontSize; |
||||||
|
}, |
||||||
|
set: function set(fontSize) { |
||||||
|
this._fontSize = fontSize; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "fontWeight", |
||||||
|
get: function get() { |
||||||
|
return this._fontWeight; |
||||||
|
}, |
||||||
|
set: function set(fontWeight) { |
||||||
|
this._fontWeight = fontWeight; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "strokeWidth", |
||||||
|
get: function get() { |
||||||
|
return this._strokeWidth; |
||||||
|
}, |
||||||
|
set: function set(strokeWidth) { |
||||||
|
this._strokeWidth = strokeWidth; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "strokeColor", |
||||||
|
get: function get() { |
||||||
|
return this._strokeColor; |
||||||
|
}, |
||||||
|
set: function set(strokeColor) { |
||||||
|
this._strokeColor = strokeColor; |
||||||
|
this._genCanvas(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "_genCanvas", |
||||||
|
value: function _genCanvas() { |
||||||
|
var _this2 = this; |
||||||
|
var canvas = this._canvas; |
||||||
|
var ctx = canvas.getContext('2d'); |
||||||
|
var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
|
||||||
|
var relBorder = border.map(function (b) { |
||||||
|
return b * _this2.fontSize * 0.1; |
||||||
|
}); // border in canvas units
|
||||||
|
|
||||||
|
var borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
|
||||||
|
var relBorderRadius = borderRadius.map(function (b) { |
||||||
|
return b * _this2.fontSize * 0.1; |
||||||
|
}); // border radius in canvas units
|
||||||
|
|
||||||
|
var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
|
||||||
|
var relPadding = padding.map(function (p) { |
||||||
|
return p * _this2.fontSize * 0.1; |
||||||
|
}); // padding in canvas units
|
||||||
|
|
||||||
|
var lines = this.text.split('\n'); |
||||||
|
var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace); |
||||||
|
ctx.font = font; // measure canvas with appropriate font
|
||||||
|
var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) { |
||||||
|
return ctx.measureText(line).width; |
||||||
|
}))); |
||||||
|
var innerHeight = this.fontSize * lines.length; |
||||||
|
canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2; |
||||||
|
canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; |
||||||
|
|
||||||
|
// paint border
|
||||||
|
if (this.borderWidth) { |
||||||
|
ctx.strokeStyle = this.borderColor; |
||||||
|
if (relBorder[0]) { |
||||||
|
// left + right borders
|
||||||
|
var hb = relBorder[0] / 2; |
||||||
|
ctx.lineWidth = relBorder[0]; |
||||||
|
ctx.beginPath(); |
||||||
|
ctx.moveTo(hb, relBorderRadius[0]); |
||||||
|
ctx.lineTo(hb, canvas.height - relBorderRadius[3]); |
||||||
|
ctx.moveTo(canvas.width - hb, relBorderRadius[1]); |
||||||
|
ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]); |
||||||
|
ctx.stroke(); |
||||||
|
} |
||||||
|
if (relBorder[1]) { |
||||||
|
// top + bottom borders
|
||||||
|
var _hb = relBorder[1] / 2; |
||||||
|
ctx.lineWidth = relBorder[1]; |
||||||
|
ctx.beginPath(); |
||||||
|
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), _hb); |
||||||
|
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), _hb); |
||||||
|
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - _hb); |
||||||
|
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - _hb); |
||||||
|
ctx.stroke(); |
||||||
|
} |
||||||
|
if (this.borderRadius) { |
||||||
|
// strike rounded corners
|
||||||
|
var cornerWidth = Math.max.apply(Math, _toConsumableArray(relBorder)); |
||||||
|
var _hb2 = cornerWidth / 2; |
||||||
|
ctx.lineWidth = cornerWidth; |
||||||
|
ctx.beginPath(); |
||||||
|
[!!relBorderRadius[0] && [relBorderRadius[0], _hb2, _hb2, relBorderRadius[0]], !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - _hb2, _hb2, relBorderRadius[1]], !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[2]], !!relBorderRadius[3] && [relBorderRadius[3], _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[3]]].filter(function (d) { |
||||||
|
return d; |
||||||
|
}).forEach(function (_ref) { |
||||||
|
var _ref2 = _slicedToArray(_ref, 4), |
||||||
|
x0 = _ref2[0], |
||||||
|
x1 = _ref2[1], |
||||||
|
y0 = _ref2[2], |
||||||
|
y1 = _ref2[3]; |
||||||
|
ctx.moveTo(x0, y0); |
||||||
|
ctx.quadraticCurveTo(x1, y0, x1, y1); |
||||||
|
}); |
||||||
|
ctx.stroke(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// paint background
|
||||||
|
if (this.backgroundColor) { |
||||||
|
ctx.fillStyle = this.backgroundColor; |
||||||
|
if (!this.borderRadius) { |
||||||
|
ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2); |
||||||
|
} else { |
||||||
|
// fill with rounded corners
|
||||||
|
ctx.beginPath(); |
||||||
|
ctx.moveTo(relBorder[0], relBorderRadius[0]); |
||||||
|
[[relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], |
||||||
|
// t
|
||||||
|
[canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], |
||||||
|
// r
|
||||||
|
[canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], |
||||||
|
// b
|
||||||
|
[relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]] // t
|
||||||
|
].forEach(function (_ref3) { |
||||||
|
var _ref4 = _slicedToArray(_ref3, 6), |
||||||
|
x0 = _ref4[0], |
||||||
|
x1 = _ref4[1], |
||||||
|
x2 = _ref4[2], |
||||||
|
y0 = _ref4[3], |
||||||
|
y1 = _ref4[4], |
||||||
|
y2 = _ref4[5]; |
||||||
|
ctx.quadraticCurveTo(x0, y0, x1, y1); |
||||||
|
ctx.lineTo(x2, y2); |
||||||
|
}); |
||||||
|
ctx.closePath(); |
||||||
|
ctx.fill(); |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.translate.apply(ctx, _toConsumableArray(relBorder)); |
||||||
|
ctx.translate.apply(ctx, _toConsumableArray(relPadding)); |
||||||
|
|
||||||
|
// paint text
|
||||||
|
ctx.font = font; // Set font again after canvas is resized, as context properties are reset
|
||||||
|
ctx.fillStyle = this.color; |
||||||
|
ctx.textBaseline = 'bottom'; |
||||||
|
var drawTextStroke = this.strokeWidth > 0; |
||||||
|
if (drawTextStroke) { |
||||||
|
ctx.lineWidth = this.strokeWidth * this.fontSize / 10; |
||||||
|
ctx.strokeStyle = this.strokeColor; |
||||||
|
} |
||||||
|
lines.forEach(function (line, index) { |
||||||
|
var lineX = (innerWidth - ctx.measureText(line).width) / 2; |
||||||
|
var lineY = (index + 1) * _this2.fontSize; |
||||||
|
drawTextStroke && ctx.strokeText(line, lineX, lineY); |
||||||
|
ctx.fillText(line, lineX, lineY); |
||||||
|
}); |
||||||
|
|
||||||
|
// Inject canvas into sprite
|
||||||
|
if (this.material.map) this.material.map.dispose(); // gc previous texture
|
||||||
|
var texture = this.material.map = new three.Texture(canvas); |
||||||
|
texture.minFilter = three.LinearFilter; |
||||||
|
texture.colorSpace = three.SRGBColorSpace; |
||||||
|
texture.needsUpdate = true; |
||||||
|
var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2; |
||||||
|
this.scale.set(yScale * canvas.width / canvas.height, yScale, 0); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "clone", |
||||||
|
value: function clone() { |
||||||
|
return new this.constructor(this.text, this.textHeight, this.color).copy(this); |
||||||
|
} |
||||||
|
}, { |
||||||
|
key: "copy", |
||||||
|
value: function copy(source) { |
||||||
|
three.Sprite.prototype.copy.call(this, source); |
||||||
|
this.color = source.color; |
||||||
|
this.backgroundColor = source.backgroundColor; |
||||||
|
this.padding = source.padding; |
||||||
|
this.borderWidth = source.borderWidth; |
||||||
|
this.borderColor = source.borderColor; |
||||||
|
this.fontFace = source.fontFace; |
||||||
|
this.fontSize = source.fontSize; |
||||||
|
this.fontWeight = source.fontWeight; |
||||||
|
this.strokeWidth = source.strokeWidth; |
||||||
|
this.strokeColor = source.strokeColor; |
||||||
|
return this; |
||||||
|
} |
||||||
|
}]); |
||||||
|
return _default; |
||||||
|
}(three.Sprite); |
||||||
|
|
||||||
|
export { _default as default }; |
||||||
Loading…
Reference in new issue