svg.js相关操作
东北小麦客 2023-09-10 Svg
# 参考资料
- 相关配套插件:
svg.select.js、svg.resize.js、svg.pan-zoom.js- SVG.js+扩展工具（svg.select.js+svg.resize.js+svg.draggable.js）联合开发画图工具
- svg.js 2.7 文档
- svg.js 3.2.0 gitee项目
# svg.js 3.2.0 的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Edit v_3.2.0</title>
<script src="https://cdn.bootcdn.net/ajax/libs/svg.js/3.2.0/svg.min.js"></script>
<!-- 新版的插件未兼容 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/svg.draggy.js/1.1.1/svg.draggy.min.js"></script> -->
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
#main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="main"></div>
</div>
</body>
<script>
function main() {
const draw = SVG().addTo('#main').size('100%', '100%');
const rectIns = draw.rect(100, 100).fill('#f06');
function handlecb (e){
console.log('click', e);
}
// rectIns.on(['click', 'mouseover'], handlecb) // ces1
// rectIns.on('click', handlecb); /// case2
// rectIns.draggy();
console.log('rectIns', rectIns);
}
/****/
main();
</script>
</html>
# svg.js 2.7.1
- !!! 案例中的
svg.resize.min.jssvg.select.min.jssvg.select.min.css存在于fileServer远程服务器 !!!
# demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Edit v_2.7.1</title>
<link rel="stylesheet" href="../js/svg.select.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
<!-- <script src="http://jillix.github.io/svg.pan-zoom.js/js/svg.js"></script> -->
<script src="http://jillix.github.io/svg.pan-zoom.js/js/svg.pan-zoom.js"></script>
<script src="http://jillix.github.io/svg.pan-zoom.js/js/svg.draggy.js"></script>
<script src="../js/svg.resize.min.js"></script>
<script src="../js/svg.select.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100vh;
overflow-y: hidden;
position: relative;
}
.opt-wrap {
position: absolute;
top: 10px;
right: 50px;
}
#addTxt {
padding: 5px 10px;
border: 1px #f1f1f1 solid;
border-radius: 5px;
cursor: pointer;
}
#main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="opt-wrap">
<div id="addTxt" onclick="handleAddTxt()">添加文字</div>
</div>
<div id="main"></div>
</div>
</body>
<!-- 缩放、拖动、选择、改变大小 -->
<script>
let isSelect = false;
/**
* 注册 "拖动、选择、改变" 等动作
*/
function registerInsActs(ins) {
if(ins) {
ins.on('click', (e) => {
console.log('rectIns', e);
isSelect = !isSelect;
ins.selectize(isSelect);
});
ins
.draggy()
.resize();
}
}
var draw; // 画笔
// var textGroup;
function main() {
draw = new SVG(document.querySelector('#main')).size('100%', '100%');
const nodes = draw.group();
nodes.panZoom();
const rectIns1 = nodes.rect(100, 100).fill('#f06');
registerInsActs(rectIns1);
const rectIns2 = nodes.rect(150, 100).fill('#f5f5f5').move(150, 200);
registerInsActs(rectIns2);
nodes.on('click', (e) => {
// console.log('nodes', e);
/** 防止传递到顶层的 draw 层级 **/
e.preventDefault();
e.stopPropagation();
});
draw.on('click', (e) => {
console.log('draw', e, draw);
});
}
function handleAddTxt() {
const textIns = draw.text('DCOS').fill('#000');
textIns.draggy().resize();
textIns.on('click', (e) => {
e.preventDefault();
e.stopPropagation();
})
}
/****/
main();
</script>
</html>
# draggy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Edit v_2.7.1</title>
<script src="https://cdn.bootcdn.net/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/svg.draggy.js/1.1.1/svg.draggy.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
#main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="main"></div>
</div>
</body>
<!-- 拖动 -->
<script>
function main() {
const draw = new SVG(document.querySelector('#main')).size('100%', '100%');
const rectIns = draw.rect(100, 100).fill('#f06');
function handlecb (e){
console.log('click', e);
}
// rectIns.on(['click', 'mouseover'], handlecb) // ces1
// rectIns.on('click', handlecb); /// case2
rectIns.draggy();
console.log('rectIns', rectIns);
}
/****/
main();
</script>
</html>
# scale_select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Edit v_2.7.1</title>
<link rel="stylesheet" href="../js/svg.select.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
<!-- <script src="http://jillix.github.io/svg.pan-zoom.js/js/svg.js"></script> -->
<script src="http://jillix.github.io/svg.pan-zoom.js/js/svg.pan-zoom.js"></script>
<script src="http://jillix.github.io/svg.pan-zoom.js/js/svg.draggy.js"></script>
<script src="../js/svg.resize.min.js"></script>
<script src="../js/svg.select.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100vh;
overflow-y: hidden;
}
#main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="main"></div>
</div>
</body>
<!-- 拖动、缩放、选择、改变大小 -->
<script>
const PIC_URL = 'http://xiaomaike.space:6089/3d/textures/water.jpg';
function drawPic() {
const draw = new SVG(document.querySelector('#main')).size('100%', '100%');
const image = draw.image(PIC_URL).loaded(function(loader) {
// console.log('this', this, loader);
this.draggy();
this.size(loader.width, loader.height)
});
image.on('click', (e) => {
image.selectize(true);
});
}
function main() {
const draw = new SVG(document.querySelector('#main')).size('100%', '100%');
const nodes = draw.group()
const rectIns = nodes.rect(100, 100).fill('#f06');
rectIns.draggy().resize();
// selectize(true) 选中 selectize(false) 取消选中
// resize 改变大小
// rectIns.draggy().selectize(true).resize();
// // Add draggable circles
// var g1 = nodes.group().translate(300, 200).draggy();
// var t1 = nodes.group().translate(315, 225).draggy();
// g1.circle(80).fill("#C2185B");
// t1.text('DCOS')
nodes.panZoom();
rectIns.on('click', (e) => {
console.log('rectIns', e);
rectIns.selectize();
});
nodes.on('click', (e) => {
// console.log('nodes', e);
/** 防止传递到顶层的 draw 层级 **/
e.preventDefault();
e.stopPropagation();
});
draw.on('click', (e) => {
console.log('draw', e, draw);
rectIns.selectize(false);
});
// const titleDom = draw.element('title').words('This is a title.').fill('#000');
}
/****/
main();
</script>
</html>
