svg绘制标尺和网格背景

最新推荐文章于 2023-01-15 08:00:57 发布

暴走十八步

最新推荐文章于 2023-01-15 08:00:57 发布

阅读量3.6k

点赞数 1

分类专栏： HTML5 文章标签： javascript css html5 svg css3

本文链接：https://blog.csdn.net/wayhb/article/details/116924228

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

svg绘制标尺和网格背景

1，效果图

2，原理

3，代码

网页上绘制背景网格和标尺有多种方法，

a），使用css的border-bottom属性绘制，优点是简单，缺点是难以控制尺寸伸缩；

b），使用canvas绘制，优点是可以动态控制，缺点是canvas会产生锯齿，不清晰等情况；

c），使用svg来绘制，优点是可以动态控制切清晰，缺点是难度稍大，好在使用snap.svg可以很好的简化代码。

1，效果图

2，原理

采用svg插件snap.svg，地址：Snap.svg - Home，开源免费，下载即可

网格一般来说都是绘制80*80像素的大格子，每个小格子是20*20像素，大格子比小格子线更细。

标尺分为横标尺，竖标尺，竖标尺采用svg绘制后再进行文字旋转90度，每个格子是20像素，这样恰好和网格对齐。

3，代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>svg标尺背景</title>
		<script src="../../static/js/snap.svg-min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.wapper{
				position: relative;
				height: 800px;
				font-size: 12px;
			}
			.ruler-v{
				position: absolute;
				left: 0px;
				width: 100%;
				background: #383838;
				height: 25px;
				z-index: 2;
			}
			.ruler-h{
				position: absolute;
				left: 0px;
				background: #383838;
				width: 25px;
				height: 100%;
				z-index: 2;
			}
			.svg{
				background-color: #faf7ec;
				position: absolute;
				top: 25px;
				left: 25px;
				bottom: 0;
				right: 0;
				z-index: 0;
				width: calc(100% - 25px);
				height: 775px;
			}
		</style>
	</head>
	<body>
		<div class="wapper">
			<!-- 横标尺 -->
			<svg id="ruler-v" class="ruler-v">
			</svg>
			<!-- 竖标尺 -->
			<svg id="ruler-h" class="ruler-h"></svg>
			<!-- 网格背景 -->
			<svg id="svg" class="svg"></svg>
		</div>
		<script type="text/javascript">
			//svg绘制标尺
			function drawRuler(){
				//绘制标尺[横]
				var r = Snap('#ruler-v');
				//绘制标尺[竖]
				var rh = Snap('#ruler-h');
				r.line(25, 0, 25, 25).attr({
					stroke: "#8f9292",
					strokeWidth: 1,
				});
				rh.line(0, 25, 25, 25).attr({
					stroke: "#8f9292",
					strokeWidth: 1,
				});
				for (var i = 1; i < 100; i++) {
					// 绘制横标尺
					r.line(80 * i + 25, 0, 80 * i + 25, 25).attr({
						stroke: "#8f9292",
						strokeWidth: 1,
					});
					r.line(20 * i + 25, 15, 20 * i + 25, 25).attr({
						stroke: "#8f9292",
						strokeWidth: 1,
					});
					let text = 80 * i;
					r.text(80 * i + 25 + 2, 12.5, text).attr({
						fill: "#b1b4b4"
					});
					// 绘制竖标尺
					rh.line(0, 80 * i + 25, 25, 80 * i + 25).attr({
						stroke: "#8f9292",
						strokeWidth: 1,
					});
					rh.line(15, 20 * i + 25, 25, 20 * i + 25).attr({
						stroke: "#8f9292",
						strokeWidth: 1,
					});
					let texth = 80 * i;
					let ruletext = rh.text(0, 80 * i + 25 + 4, texth).attr({
						fill: "#b1b4b4"
					});
					// 旋转文字
					let matrix = new Snap.Matrix();
					matrix.rotate(90, 2, 80 * i + 25 + 4);
					ruletext.transform(matrix);
				}
			}
			// svg绘制背景网格
			function drawGrid(){
				var svg = Snap('#svg');
				// 绘制80大方格
				for (var i = 1; i < 50; i++) {
					svg.line(0, 80 * i, 2000, 80 * i).attr({
						stroke: "#f0ebdc",
						strokeWidth: 1.5,
					});
					svg.line(80 * i, 0, 80 * i, 2000).attr({
						stroke: "#f0ebdc",
						strokeWidth: 1.5,
					});
				}
				// 绘制20小方格
				for (var i = 1; i < 100; i++) {
					svg.line(0, 20 * i, 2000, 20 * i).attr({
						stroke: "#f5f0e0",
						strokeWidth: 1,
					});
					svg.line(20 * i, 0, 20 * i, 2000).attr({
						stroke: "#f5f0e0",
						strokeWidth: 1,
					});
				}
			}
			
			drawRuler();
			drawGrid();
		</script>
	</body>
</html>

暴走十八步

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
svg绘制标尺和网格背景

目录1，效果图2，原理3，代码网页上绘制背景网格和标尺有多种方法， a），使用css的border-bottom属性绘制，优点是简单，缺点是难以控制尺寸伸缩； b），使用canvas绘制，优点是可以动态控制，缺点是canvas会产生锯齿，不清晰等情况； c），使用svg来绘制，优点是可以动态控制切清晰，缺点是难度稍大，好在使用snap.svg可以很好的简化代码。1，效果图2，原理采用svg插件snap.svg，地址：htt...
复制链接

扫一扫