哪种方法最好构建此复杂图

| 经过15年的UI开发，我几乎没有想到，“我到底是怎么做到的。”这就是其中一次。一位平面设计师将我的客户出售给一个非常复杂的图形，形状为五边形，由5个单独的三角形组成。设计者已指定每个三角形应为与商标匹配的特定颜色，并且每个三角形应根据每种颜色代表的加工百分比“填充”。您几乎必须查看该图像才能理解：我已经绞尽脑汁了一天，试图弄清楚如何完成此任务。客户端已指定它必须在所有主要浏览器中兼容，为了清楚起见，我将告诉他它将是IE7 +。尽管我肯定会因为缺乏其他想法而接受CSS3方法，但这极大地限制了CSS3技术。我不希望在深夜里殴打动作脚本，因此Flash一直是我的最爱清单。我实际上已经头脑风暴了如何使用Sprites进行操作，但是通过使用Chrome换IE6来生成250或500个三角形以及相关的CSS的想法就在那里。该站点基于PHP / MySQL构建，我们大量使用Jquery。如有必要，我们还提供完整版本的FusionCharts和HighCharts。如果有一种可以实现此目的的商业产品，我当然愿意购买它来使它起作用。完成这项艰巨任务的最佳方法是什么？

已邀请:

5 个回复

漂截嘘

除非能找到已经编写的实现，否则我将使用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>

哭木算

我不得不推荐RaphaelJS（请参阅http://raphaeljs.com/）。它与IE7兼容，您可以很好地制作三角形：您需要进行数学运算，但很有可能。编辑：请参阅http://www.chittram.com/editor.jsp，以获取一些可以完成的形状的快速示例。该站点是一个交互式编辑器，但已演示了您需要的核心功能。

凸晴

<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();
    } 
}

成为：缺点：也许还没有跨浏览器。

香腔弥胯瓤

如果绝对必须尽可能地兼容，我将生成SVG图像并将其渲染为PNG。这几乎没有像这样的带有很少点的图像听起来那样慢。这是一个非常快速，非常肮脏的示例。它假定您具有ImageMagick扩展名，尽管您可以在紧急情况下将SVG转储到文件中，然后使用exec()rsvg之类的命令行工具。显然，“正确”答案涉及某种用于呈现图的缓存方案。另外，请原谅我不再是SVG忍者。 graph.svg.php：

<?php echo \'<\'; ?>?xml version=\"1.0\" standalone=\"no\"?>
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" 
  \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
<svg width=\"240\" height=\"240\"
     xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">

  <g transform=\"translate(120,120) translate(0,15)\">
    <polygon fill=\"none\" stroke=\"green\" stroke-width=\"10\" 
              points=\"0,0 -50,68.82 50,68.82\" />
    <g transform=\"scale(<?php echo $fill[\'green\']; ?>)\">
      <polygon fill=\"green\" stroke=\"green\" stroke-width=\"10\" 
                points=\"0,0 -50,68.82 50,68.82\" />
    </g>
  </g>

  <g transform=\"translate(120,120) rotate(72) translate(0,15)\">
    <polygon fill=\"none\" stroke=\"red\" stroke-width=\"10\" 
              points=\"0,0 -50,68.82 50,68.82\" />
    <g transform=\"scale(<?php echo $fill[\'red\']; ?>)\">
      <polygon fill=\"red\" stroke=\"red\" stroke-width=\"10\" 
                points=\"0,0 -50,68.82 50,68.82\" />
    </g>
  </g>

  <g transform=\"translate(120,120) rotate(144) translate(0,15)\">
    <polygon fill=\"none\" stroke=\"yellow\" stroke-width=\"10\" 
              points=\"0,0 -50,68.82 50,68.82\" />
    <g transform=\"scale(<?php echo $fill[\'yellow\']; ?>)\">
      <polygon fill=\"yellow\" stroke=\"yellow\" stroke-width=\"10\" 
                points=\"0,0 -50,68.82 50,68.82\" />
    </g>
  </g>

  <g transform=\"translate(120,120) rotate(216) translate(0,15)\">
    <polygon fill=\"none\" stroke=\"purple\" stroke-width=\"10\" 
              points=\"0,0 -50,68.82 50,68.82\" />
    <g transform=\"scale(<?php echo $fill[\'purple\']; ?>)\">
      <polygon fill=\"purple\" stroke=\"purple\" stroke-width=\"10\" 
                points=\"0,0 -50,68.82 50,68.82\" />
    </g>
  </g>

  <g transform=\"translate(120,120) rotate(288) translate(0,15)\">
    <polygon fill=\"none\" stroke=\"blue\" stroke-width=\"10\" 
              points=\"0,0 -50,68.82 50,68.82\" />
    <g transform=\"scale(<?php echo $fill[\'blue\']; ?>)\">
      <polygon fill=\"blue\" stroke=\"blue\" stroke-width=\"10\" 
                points=\"0,0 -50,68.82 50,68.82\" />
    </g>
  </g>

</svg>

render.php：

<?php

$fill = array(
    \'green\'  => 0.5,
    \'red\'    => 0.8,
    \'yellow\' => 0.55,
    \'purple\' => 0.4,
    \'blue\'   => 0.75,
);

ob_start();
include(\'graph.svg.php\');
$svg = ob_get_contents();
ob_end_clean();

$im = new Imagick();
$im->readImageBlob($svg);
$im->setImageFormat(\'png24\');
$png = $im->getImagesBlob();
$im->clear();
$im->destroy();

header(\'Content-Type: image/png\');
header(\'Content-Length: \' . strlen($png));
echo $png;
exit;

输出看起来像这样：

你换

我认为，如果您必须在JS / CSS中执行此操作，而Flash / HTML5则不是一种选择，请看一下在CSS中使用三角形的便捷技巧： http://www.howtocreate.co.uk/tutorials/css/slopes 以及其他参考： http://css-tricks.com/snippets/css/css-triangle/ 通过巧妙地设置框的边框粗细，您可以任意旋转获得所需的任何形状的三角形。弄清楚是很棘手的，而且我没有方便的代码，但有可能。您可以将三角形相互嵌套（看示例图片，我注意到它完全由三角形组成，内部三角形是外部三角形的倒置嵌套），所以我认为这是完全可能的，尽管数学可能会有所帮助关于定位以及您是否需要图表灵活（任意数量的三角形和大小）而言，是棘手的。

要回复问题请先登录或注册

哪种方法最好构建此复杂图

5 个回复

发起人

php

user_interface

javascript

css

charts

问题状态

哪种方法最好构建此复杂图

与内容相关的链接

5 个回复

发起人

php

user_interface

javascript

css

charts

问题状态