如何創建基於SVG圖形與奧裏利亞

我已經創造了一些角+ SVG圖形樣本這裏： https://github.com/ocampesato/angular-graphics 如何創建基於SVG圖形與奧裏利亞

我在哪裏可以找到，說明如何使用這些代碼示例轉換爲奧裏利亞一個代碼示例？

樣本HTML頁面是在這裏：

<!DOCTYPE html> 
<html ng-app="App"> 
<head> 
    <meta chartset="utf-8"> 
    <title>SVG and Angular</title> 

    <script 
src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"> 
    </script> 
    <script src="ArchOvals1.js"></script> 
</head> 

<body> 
    <div ng-controller="MyCtrl"> 
    <svg width="800" height="500" ng-init="elems = getElems()"> 
     <ellipse ng-repeat="p in elems" 
      ng-attr-cx="{{::p.cx}}" ng-attr-cy="{{::p.cy}}" 
      ng-attr-rx="{{::p.rx}}" ng-attr-ry="{{::p.ry}}" 
      ng-attr-fill="{{::p.fill}}"> 
     </ellipse> 
    </svg> 
    </div> 
</body> 
</html>

的HTML頁面的樣本JS文件是在這裏：

window.App = angular.module('App', []); 

App.controller('MyCtrl', function($scope){ 
    $scope.getElems = function(){ 
    var majorAxis=40, minorAxis=80, maxCount=200, elems=[]; 
    var colors = ["#f00", "#0f0", "#00f"]; 

    var basePointX = 250, basePointY = 250; 
    var currentX = 0, currentY  = 0; 
    var offsetX  = 0, offsetY  = 0; 
    var radius  = 0, spiralCount = 4; 
    var Constant = 0.25, angle  = 0; 
    var deltaAngle = 1, maxAngle  = 721; 

    var offsetX=0, offsetY=0, index=0; 
    var majorAxis=40, minorAxis=60, elems=[], color=""; 
    var colors=["#FF0000","#0000FF","#FF00FF","#FF0000"]; 

    for(angle=0; angle<maxAngle; angle+=deltaAngle) { 
     radius = Constant*angle; 
     offsetX = radius*Math.cos(angle*Math.PI/180); 
     offsetY = radius*Math.sin(angle*Math.PI/180); 
     currentX = basePointX+offsetX; 
     currentY = basePointY-offsetY; 

     // calculate index into the colors array 
     index = Math.floor(angle/deltaAngle); 

     // append an (x,y) pair of values that 
     // represent the upper-left vertex 
     elems.push({cx:currentX, cy:currentY, 
        rx:majorAxis, ry:minorAxis, 
        fill:colors[index%2]}); 
    } 

    return elems; 
    }; 
});

建議/代碼樣本，將不勝感激+ :)

來源

2015-04-07 Oswald Campesato

綁定到Aurelia的SVG與綁定到任何其他HTML元素沒有區別。我們目前有一個優秀的issue綁定到IE中的樣式屬性，幷包括對附加svg屬性的支持，但除此之外，它與綁定到輸入標籤或類似的東西沒有區別。

這裏是SVG代碼（svg.html）：

<template> 
     <svg width="800" height="500" > 
      <ellipse repeat.for="p of getElems()" 
        cx.bind="p.cx" cy.bind="p.cy" 
        rx.bind="p.rx" ry.bind="p.rx" 
        style="fill: ${p.fill}"> 
      </ellipse> 
     </svg> 
</template>

這裏是視圖模型（svg.js）。請注意，我只是複製你的代碼，並使其ES6：

export class SVG{ 
    getElems() { 
    var majorAxis=40, minorAxis=80, maxCount=200, elems=[]; 
    var colors = ["#f00", "#0f0", "#00f"]; 

    var basePointX = 250, basePointY = 250; 
    var currentX = 0, currentY  = 0; 
    var offsetX  = 0, offsetY  = 0; 
    var radius  = 0, spiralCount = 4; 
    var Constant = 0.25, angle  = 0; 
    var deltaAngle = 1, maxAngle  = 721; 

    var offsetX=0, offsetY=0, index=0; 
    var majorAxis=40, minorAxis=60, elems=[], color=""; 
    var colors=["#FF0000","#0000FF","#FF00FF","#FF0000"]; 

    for(angle=0; angle<maxAngle; angle+=deltaAngle) { 
     radius = Constant*angle; 
     offsetX = radius*Math.cos(angle*Math.PI/180); 
     offsetY = radius*Math.sin(angle*Math.PI/180); 
     currentX = basePointX+offsetX; 
     currentY = basePointY-offsetY; 

     // calculate index into the colors array 
     index = Math.floor(angle/deltaAngle); 

     // append an (x,y) pair of values that 
     // represent the upper-left vertex 
     elems.push({cx:currentX, cy:currentY, 
        rx:majorAxis, ry:minorAxis, 
        fill:colors[index%2]}); 
    } 

    return elems; 
    } 
}

下面是該代碼的gist.run版本：https://gist.run/?id=242f74e50b68ca9eb1c657aa24af4e8e

來源

2015-04-08 12:45:54

如何創建基於SVG圖形與奧裏利亞

回答

相關問題