使用SVG和Angular JS的三角進度條

Question

我需要使用SVG和Angular JS來執行我的自定義三角形進度條。但似乎很難控制綠色條。誰能幫我？

在這裏我的代碼。您可以調整textbox中的值。

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

都沒有碰過角之前，所以我不能幫助你。不過，我可以介紹一種適用於SVG或Canvas的方法。 （畫布執行速度更快，我想因爲GPU加速）

由於您的初始圖像的寬高比爲2.85：1，我選擇使用100px的高度和285px的寬度 - 我已經使用了每個尺寸相同。

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) 
 
{ 
 
\t byId('slider').style.width = byId('volume').width + 'px'; 
 
\t setVolume(50); 
 
\t byId('slider').addEventListener('input', onSliderChanged, false); 
 
\t byId('slider').addEventListener('input', onSlider2Changed, false); 
 
} 
 

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

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

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

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

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