我在这里创建了一些 Angular+SVG 图形示例:
https://github.com/ocampesato/angular-graphics
在哪里可以找到说明如何将这些代码示例转换为 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>
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;
};
});
建议/代码示例将不胜感激+ :)
最佳答案
使用 Aurelia 绑定(bind)到 SVG 与绑定(bind)到任何其他 HTML 元素没有什么不同。我们目前有一个优秀的issue用于绑定(bind)到 IE 中的样式属性，并包括对其他 svg 属性的支持，但除此之外，它与绑定(bind)到输入标签或类似的东西没有什么不同。
这是 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>
这是 View 模型(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
关于aurelia - 如何使用 Aurelia 创建基于 SVG 的图形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29503468/