<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Zoom Image on Hover Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
//imageObj.src = 'https://konvajs.org/assets/yoda.jpg';
const json = '{"attrs":{"width":2382,"height":1684,"draggable":true},"className":"Stage","children":[{"attrs":{"hitGraphEnabled":false},"className":"Layer","children":[{"attrs":{},"className":"Image"},{"attrs":{"source":"https://konvajs.org/assets/yoda.jpg"},"className":"Image"}]},{"attrs":{},"className":"Layer","children":[{"attrs":{"draggable":true,"x":306,"y":303,"transformsEnabled":"position"},"className":"Group","children":[{"attrs":{"radius":20,"stroke":"#231fff","strokeWidth":4,"fill":"#ffffff"},"className":"Circle"},{"attrs":{"text":"1","fontSize":14,"originX":"center","originY":"center","fill":"#231fff","x":-5,"y":-5},"className":"Text"},{"attrs":{"data":"M.91,0H29.09A.91.91,0,0,1,30,.91v243a.88.88,0,0,1-.26.63L15.65,258.86a.9.9,0,0,1-1.3,0L.26,244.52a.88.88,0,0,1-.26-.63V.91A.91.91,0,0,1,.91,0Z","originX":"center","originY":"bottom","x":10,"y":15,"angle":-30,"fill":"#231fff","scaleX":0.15,"scaleY":0.15,"rotation":-30},"className":"Path"}]},{"attrs":{"draggable":true,"x":490,"y":557,"transformsEnabled":"position"},"className":"Group","children":[{"attrs":{"radius":20,"stroke":"#231fff","strokeWidth":4,"fill":"#ffffff"},"className":"Circle"},{"attrs":{"text":"2","fontSize":14,"originX":"center","originY":"center","fill":"#231fff","x":-5,"y":-5},"className":"Text"},{"attrs":{"data":"M.91,0H29.09A.91.91,0,0,1,30,.91v243a.88.88,0,0,1-.26.63L15.65,258.86a.9.9,0,0,1-1.3,0L.26,244.52a.88.88,0,0,1-.26-.63V.91A.91.91,0,0,1,.91,0Z","originX":"center","originY":"bottom","x":10,"y":15,"angle":-30,"fill":"#231fff","scaleX":0.15,"scaleY":0.15,"rotation":-30},"className":"Path"}]}]}]}';
const stage = Konva.Node.create(json, 'container');
stage.find('Image').forEach((node) => {
const img = new Image();
img.src = node.getAttr('source');
img.onload = () => {
node.image(img);
stage.batchDraw();
}
})
console.log(stage.toJSON())
</script>
</body>
</html>
dgiot-topo-master.zip
153 浏览量
2022-12-09
14:50:44
上传
评论
收藏 24KB ZIP 举报
dgiot_topo-master.zip （21个子文件） 
dgiot_topo-master .rebar3 rebar_compiler_erl 
source.dag 250B priv swagger swagger_topo.json 6KB
test.html 2KB dgiot_topo.schema 2B rebar.config 14B include dgiot_topo.hrl 859B LICENSE 11KB src dgiot_topo.erl 13KB dgiot_topo_sup.erl 2KB dgiot_dashboard.erl 8KB dgiot_topo_handler.erl 5KB dgiot_topo.app.src 471B dashboard_sup.erl 357B dashboard_worker.erl 4KB dgiot_topo_channel.erl 5KB dgiot_topo.app.src.script 709B dgiot_topo_app.erl 1KB erlang.mk 24B .gitignore 44B Makefile 823B etc dgiot_topo.conf 167B资源评论
