【金融大屏项目】—— SVG实现弧形文本

前言：react大屏项目中有如下弧形文字需求，试用网上的arctext.js动画库无法实现环形文字，最终只有通过SVG调试出合适的文本path路径可以解决这一问题。

 

<svg xmlns="http://www.w3.org/2000/svg">
   <defs>
       <path id="myTextPath1" d="M10.399993896484375 37.79999542236328 C50.399993896484375 84.79999542236328 219.39999389648438 86.79999542236328 268.3999938964844 35.79999542236328"/>
   </defs>
   <text x="0" y="0" style={{fill: '#A6C3F7', fontSize: 16}}>
        <textPath xlinkHref="#myTextPath1">
             处理表量：{jsLayerData.table_num}张 字段量：{jsLayerData.field_num}个
        </textPath>
    </text>
</svg>

SVG path路径动态生成HTML　（转载自http://www.cnblogs.com/zjfree/ ）

<!DOCTYPE html>
<!-- 参考：http://dayu.pw/svgcontrol/ -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>SVG PATH路径生成</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<style>
		body{
			background: #ccc;
			font-family: 'Microsoft YaHei';
			color: #345;
		}
		.svg-inner{
			width: 900px;
			height: 600px;
			margin: 0 auto;
			background: #fff;
		}
		#svgMain{
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			box-shadow:0px 3px 13px #333333;
		}
		#svgMain circle{
			cursor: pointer;
			fill:rgba(200,200,200,1);stroke:rgba(200,200,200,1);stroke-width:3
		}
		#svgMain polyline{
			fill:rgba(200,200,200,0);stroke:rgba(200,200,200,1);stroke-width:1
		}
		h1, h4{
			text-align:center;
			margin:10px;
		}
	</style>

	<h1>贝塞尔曲线控制</h1>
	<h4>M200 250 C141.5 130 421.5 146 500 250</h4>
	<div style="text-align:center; margin-bottom:10px;">
		<label><input type="checkbox" id="chkZ" />闭合</label>
		 
		<select id="selType">
			<option value="M">M 移动</option>
			<option value="L" selected>L 画线到</option>
			<option value="H">H 水平绘制</option>
			<option value="V">V 竖直绘制</option>
			<option value="C">C 三次贝塞尔</option>
			<option value="S">S 三次贝塞尔对称</option>
			<option value="Q">Q 二次贝塞尔</option>
			<option value="T">T 二次贝塞尔连续</option>
		</select>
		  *双击可添加控制点
	</div>
	<div class="svg-inner">
		<svg width="100%" height="100%" id="svgMain" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<polyline points=""></polyline>
			<path d="" style="fill:rgba(0,0,0,0);stroke:#345;stroke-width:3"></path>
			<circle data-type="M" cx="200" cy="250" r="5"></circle>
			<circle data-type="C" cx="141.5" cy="130" r="5"></circle>
			<circle data-type="C" cx="421.5" cy="146" r="5"></circle>
			<circle data-type="C" cx="500" cy="250" r="5"></circle>
		</svg>
	</div>

	<script>
		$(function(){
			$('#svgMain').dblclick(function(e){
				var cx = e.pageX-$(this).parent().offset().left;
				var cy = e.pageY-$(this).parent().offset().top;

				var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
				circle.setAttribute("cx", cx);
				circle.setAttribute("cy", cy);
				circle.setAttribute("r", 5);
				circle.setAttribute("data-type", $('#selType').val());
				$(this).append(circle);
				setPoints($(circle));
				setPolyline();
				setPath();
			});

			$('#svgMain circle').each(function(){
				setPoints($(this));
			});

			$('#chkZ').change(function(){
				setPolyline();
				setPath();
			});

			setPolyline();
			setPath();
		});

		function setPoints(obj)
		{
			var mouseDown=false;
			obj.mousedown(function(){
				mouseDown=true;
			});
			obj.parent().mouseup(function(){
				mouseDown=false;
			});
			obj.parent().mousemove(function(e){
				e.preventDefault();
				if(mouseDown)
				{
					obj.attr('cx',e.pageX-obj.parent().offset().left);
					obj.attr('cy',e.pageY-obj.parent().offset().top);
					setPolyline();
					setPath();
				}
			});
		}

		function setPolyline()
		{
			var points = '';
			$('#svgMain circle').each(function(){

				points += $(this).attr('cx') + ',' + $(this).attr('cy') + ' ';
			});

			$('#svgMain polyline').attr('points', points);
		}

		function setPath()
		{
			var d = '';
			var lastType = '';
			$('#svgMain circle').each(function(){
				var cx = $(this).attr('cx');
				var cy = $(this).attr('cy');
				var t = $(this).data('type');
				if (lastType != t || t == 'M'){
					d += t;
				}

				if (t == 'H') {
					d += cx + ' ';
				} else if (t == 'V') {
					d += cy + ' ';
				} else {
					d += cx + ' ' + cy + ' ';
				}

				lastType = t;
			});

			if ($('#chkZ')[0].checked)
			{
				d += ' Z';
			}

			$('h4').html(d);
			$('#svgMain path').attr('d', d);
		}
	</script>

	</body></html>

注：转载请注明出处　　

posted @ 2022-02-21 11:44  柳洁琼Elena  阅读(169)  评论(0)    收藏  举报