2

我正在开发一个需要圆形用户界面的项目。该界面将使用 Raphael.js 创建环（圆环图样式），每个部分都是一个菜单项。选择后，将生成一个新环，其中包含下一个任务所需的选择数量。

所以我遇到的问题是创建实际的 javascript 类来执行此操作。作为单独的功能，它工作得很好，但效率不高。如何调用新对象并让戒指出现在屏幕上？这是我正在使用的代码：

var paper = Raphael('paper', 600, 600);
function RingObj(centerX, centerY, innerR, outerR, startAngle, endAngle, sections) {
this.centerX = centerX;
this.centerY = centerY;
this.innerR = innerR;
this.outerR = outerR;
this.startAngle = startAngle;
this.endAngle = endAngle;
this.sections = sections;

this.donutRing = function(){        
this.endAngle = 360 / this.sections;
this.endAng = this.endAngle;
paper.setStart();
for (i = 1; i <= this.sections; i++){
this.arc = function(){
radians = Math.PI / 180,
largeArc = +(this.endAngle - this.startAngle > 180);
outerX1 = this.centerX + this.outerR * Math.cos((this.startAngle-90) * radians),
outerY1 = this.centerY + this.outerR * Math.sin((this.startAngle-90) * radians),
outerX2 = this.centerX + this.outerR * Math.cos((this.endAngle-90) * radians),
outerY2 = this.centerY + this.outerR * Math.sin((this.endAngle-90) * radians),
innerX1 = this.centerX + this.innerR * Math.cos((this.endAngle-90) * radians),
innerY1 = this.centerY + this.innerR * Math.sin((this.endAngle-90) * radians),
innerX2 = this.centerX + this.innerR * Math.cos((this.startAngle-90) * radians),
innerY2 = this.centerY + this.innerR * Math.sin((this.startAngle-90) * radians);

// build the path array
this.path = [
    ["M", outerX1, outerY1], //move to the start point
    ["A", outerR, outerR, 0, largeArc, 1, outerX2, outerY2],
    ["L", innerX1, innerY1],
    ["A", innerR, innerR, 0, largeArc, 0, innerX2, innerY2],
    ["z"] //close the path
    ];                   
return this.path;

};

this.ringpath = paper.path(this.arc);
this.startAngle = this.endAngle;
this.endAngle = this.endAngle + this.endAng;
}
this.ringP = paper.setFinish();
this.ringP.attr({
          fill :'#f60',
          stroke: '#eee'
        });
return this.ringP;  
};  
};

var Ring = new RingObj (300, 300, 65, 125, 0, 45, 8);
4

0 回答 0