什么方法最适合构建这个复杂的图形

Question

经过15年的UI开发,我很少看到并思考,"我到底怎么做." 这是其中一次.

一位平面设计师将我的客户卖给了一个非常复杂的五边形图形,由五个单独的三角形组成.设计者已指定每个三角形应为与品牌匹配的特定颜色,并且每个三角形应根据每种颜色所代表的过程百分比"填充".你几乎要看到图像才能理解:

我一直绞尽脑汁想要弄清楚如何完成这项任务.客户端已经指定它必须在所有主流浏览器中兼容,为了理智,我将告诉他将是IE7 +.这严重限制了CSS3技术,但由于缺乏其他想法,我肯定会接受CSS3方法.我不想在动作脚本上熬夜,所以Flash是我愿望清单的最底层.我实际上已经使用Sprites头脑风暴如何做到这一点,但是生产250或500个三角形以及相关CSS的想法就在那里与IE6交易Chrome.

该站点基于PHP/MySQL,我们大量使用Jquery.如有必要,我们还可以提供完整版的FusionCharts和HighCharts.如果有商业产品可以实现这一点,我当然愿意购买它来实现这一目标.

实现这项艰巨任务的最佳方法是什么？

Answer 1

除非我能找到已经编写的实现,否则我会使用Raphaël.

这将需要大量工作,但最终结果应该是非常好的.

看看一些演示,它们非常光滑.

Raphaël目前支持Firefox 3.0 +,Safari 3.0 +,Chrome 5.0 +,Opera 9.5+和Internet Explorer 6.0+.

这看起来很有趣,所以我决定用Raphaël自己实现它:

请参阅: http ://jsfiddle.net/2Tsjy/

它应该在"所有浏览器"中工作.我没有做的唯一部分是文本.

JavaScript的:

var paper = Raphael("pentagon"),
    fullNum = [40, 53],
    borderColours = ['#329342','#9e202c','#f47933','#811f5a','#11496c'],
    fillColours = ['#74ae3d','#d01f27','#eaa337','#32133f','#2c7aa1'],
    triangles = [],
    border, fill, st, i;

for (i=0; i<5; i++) {
    border = paper.path(getPercentPath(0)).attr({
        'fill': borderColours[i],
        'stroke-width': 0        
    }),
    fill = paper.path(["M", 116, 123] + "l-44,61 88,0z").attr({
        'stroke': fillColours[i],
        'stroke-width': 6
    });
    triangles.push(border);

    st = paper.set();
    st.push(border, fill);
    st.rotate(i * 72, 116, 113);

    setPercent(i, 30+Math.floor(Math.random()*70));
}

function getPercentPath(percent) {
    var ratio = percent/100;
    return ["M", 116, 128] + "l-" + ratio*fullNum[0] + "," + ratio*fullNum[1] + " " + ratio*fullNum[0]*2 + ",0z";
}
function setPercent(i, percent) {
    triangles[i].attr({
        path: getPercentPath(percent)
    });
}


setInterval(function(){
    for (var i=0; i<5; i++) {
        setPercent(i, 30+Math.floor(Math.random()*70));
    }
}, 2000);

CSS:

#pentagon {
    width: 226px;
    height: 227px;
    border: 1px solid red;
    background: #fff;
    background: rgba(255,255,255,0.8)
}

HTML:

<div id="pentagon"></div>

Answer 2

我不得不推荐RaphaelJS(见http://raphaeljs.com/).它与IE7兼容,你可以很好地完成三角形:你需要做数学,但很有可能.

编辑:请访问http://www.chittram.com/editor.jsp,快速了解一些可以完成的形状.该站点是一个交互式编辑器,但您展示了所需的核心功能.

Answer 3

怎么样<canvas>？您可以轻松地绘制一个三角形,然后通过旋转画布360/5度数绘制其他三角形.

示例:http://jsfiddle.net/Stijntjhe/dC6kX/

window.onload = function() {
    var ce = document.getElementById('ce');
    var c = ce.getContext('2d');
    c.translate(ce.offsetWidth / 2, ce.offsetHeight / 2);

    for(var pie = 0; pie < 5; pie++) {
        c.save();
        c.rotate(pie/5 * Math.PI * 2);

        c.beginPath();
        c.moveTo(0, -10);
        c.lineTo(-50, -80);
        c.lineTo(50, -80);
        c.lineTo(0, -10);
        c.lineWidth = 5;
        c.lineCap = 'square';
        c.strokeStyle = colors[pie];
        c.stroke();

        c.restore();
    } 
}

变为:

缺点:可能还没有跨浏览器.