Как создать SVG на основе графики с Aurelia

Я создал некоторые угловые + SVG графики образцы здесь: https://github.com/ocampesato/angular-graphics Как создать SVG на основе графики с Aurelia

Где можно найти образец кода, который показывает, как преобразовать эти примеры кода для Aurelia?

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>

JS Пример файла для страницы HTML здесь:

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

Binding SVG с Aurelia ничем не отличается от привязки к любому другому элементу 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 на основе графики с Aurelia

ответ

Смежные вопросы