Menu
I've created some Angular+SVG graphics samples here: https://github.com/ocampesato/angular-graphics
Where can I find a code sample that illustrates how to convert these code samples to Aurelia?
A sample HTML page is here:
<!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>
A sample JS file for the HTML page is here:
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;
};
});
Suggestions/code samples would be appreciated+:)
706
Binding to SVG with Aurelia is no different than binding to any other HTML element. We currently have an outstanding issue for binding to the style attribute in IE, and including support for additional svg attributes but aside from that it is no different than binding to an input tag or something like that.
Here is the svg code (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>
Here is the view model (svg.js). Note, I just copied your code and made it 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;
}
}
Here is a gist.run version of this code: https://gist.run/?id=242f74e50b68ca9eb1c657aa24af4e8e
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
