Question

我在这里创建了一些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;
  };
});

建议/代码示例将不胜感激+：）

Answer 1

使用Aurelia绑定到SVG与绑定到任何其他HTML元素没有什么不同。我们目前有一个优秀的issue用于绑定IE中的style属性，并且包括对其他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

如何使用Aurelia创建基于SVG的图形

1 个答案: