javascript - 使用 SVG 和 Angular JS 的三 Angular 形进度条

Question

我需要使用 SVG 和 Angular JS 制作自定义三 Angular 形进度条。但绿色条似乎很难控制。谁能帮我吗？

这是我的代码。您可以调整文本框中的值。

var app = angular.module('ProgressBar', []);
app.controller('ProgressBarCtrl', function($scope) {
    $scope.A=365;
    $scope.B=275;
    $scope.C=33;
    $scope.D=276;
    $scope.E=366;
    $scope.F=157;
});

.bar-content{fill:#D1D3D4;}
.bar-frame{fill:#69BD45;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ProgressBar" ng-controller="ProgressBarCtrl">
<input type="number" ng-model="A" />
<input type="number" ng-model="B" />
<input type="number" ng-model="C" />
<input type="number" ng-model="D" />
<input type="number" ng-model="E" />
<input type="number" ng-model="F" />
  
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
  
  <polygon id="XMLID_1_" class="bar-content" points="535,275 36,275 535,97 "/>
                   <polygon id="XMLID_2_" class="bar-frame" points="{{A}},{{B}} {{C}},{{D}} {{E}},{{F}} "/>
                   </svg>
  </div>

Answer 1

之前没有接触过 Angular，所以我无法帮助你。不过，我可以提出一种适合与 SVG 或 Canvas 一起使用的方法。 (我想 Canvas 实现速度更快，因为它是 GPU 加速的)

由于您的初始图像的纵横比为 2.85 : 1，因此我选择使用高度 100 像素和宽度 285 像素 - 我对每个图像使用相同的尺寸。

function byId(id){return document.getElementById(id)}
function allByClass(clss){return document.getElementsByClassName(clss)}
function allByTag(tag,parent){return (parent = undefined ? document : parent).getElementsByTagName(tag)}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	byId('slider').style.width = byId('volume').width + 'px';
	setVolume(50);
	byId('slider').addEventListener('input', onSliderChanged, false);
	byId('slider').addEventListener('input', onSlider2Changed, false);
}

function onSliderChanged(evt)
{
	var value = this.value;
	setVolume(value);
}

function onSlider2Changed(evt)
{
	var value = this.value;
	setVolumeSVG(value);
}

function setVolumeSVG(percent)
{
	var svg = byId('mSvg');
	var barWidth = (percent/100) * svg.width.baseVal.value;
	var barHeight = (percent/100) * svg.height.baseVal.value;
	
	var msg = "0,"+svg.height.baseVal.value + " " 
			+ barWidth + "," + (svg.height.baseVal.value-barHeight) + " " 
			+ barWidth + "," + svg.height.baseVal.value;
											
	allByClass('barSlider')[0].setAttribute('points', msg);
}
//
//
//								(2)
//
//
//
//
//  (1)							(3)

function setVolume(percent)
{
	var can = byId('volume');
	var ctx = can.getContext('2d');
	ctx.fillStyle = "rgba(0,0,0,0)";
	ctx.fillRect(0,0,can.width,can.height);
	ctx.fillStyle = "#d1d3d4";
	
	ctx.moveTo(0,can.height);
	ctx.beginPath();
	ctx.lineTo(can.width, 0);
	ctx.lineTo(can.width,can.height);
	ctx.lineTo(0,can.height);
	ctx.fill();
	
	ctx.beginPath();
	ctx.fillStyle = "#69bd45";
	ctx.moveTo(0,can.height);
	ctx.lineTo( (percent/100)*can.width, can.height - ( (percent/100)*can.height) );
	ctx.lineTo( (percent/100)*can.width, can.height );
	ctx.lineTo(0,can.height);
	ctx.fill()
}

	<canvas width=285 height=100 id='volume'></canvas><br>
	<input type='range' min='0' max='100' step='1' value=50 id='slider'/>
	<hr/>
	<svg id='mSvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 100" width=285 height=100>
		<g>
			<polygon class="barFrame" points="0,100 285,100 285,0"></polygon>
			<polygon class='barSlider' points="0,100 143,100 143,50"></polygon>
		</g>
		<style>
			.barFrame{ fill: #d1d3d4; }
			.barSlider{ fill: #69bd45; }
		</style>
	</svg>