画一堆形状答案

【问题标题】：Draw A Stack of Shapes画一堆形状
【发布时间】：2013-02-27 03:28:34
【问题描述】：

我正在尝试构建一个网络工具来生成由一堆形状组成的图像。每个形状元素都源自一个原始形状；推导基本上是通过扩展 x 个像素，然后将其旋转 y 度，然后将其放置在堆栈的“末尾”来创建的。在下图中，原始形状是一个白色的七边形，边上略微弯曲。粉红色派生是通过以下步骤创建的：

复制白色七边形并将其放大 10 像素。
将其旋转 +/- 8 度。
将其放在白色七边形后面。

我的问题是哪种网络技术适合（也是最简单的）来完成这项任务？ HTML5 画布、SVG 还是 WebGL？我倾向于画布，但它是only supports one primitive shape i.e. rectangle。

对于弯曲的侧面，我认为没有一个库可以自动执行此操作。我可能需要求助于手动进行，例如在画布中使用 arcs()。

【问题讨论】：

HTML5 支持多边形。所以，通过一点研究，你可以让它工作

标签： html canvas svg webgl

【解决方案1】：

Canvas 应该能够让您轻松克隆、更改和重绘绘图背后的元素 :)。

对于简单的事情，截至 2013 年 3 月，我建议使用 Kinetic JS

像这样，Blobs 可以很容易地得到拱形多边形：

new Kinetic.Blob({
    x: 200,
    y: 200,
    scale: 2,
    offset: [50, 50],
    points: [{
        x: 36,
        y: 0
    }, {
        x: 81,
        y: 10
    }, {
        x: 100,
        y: 50
    }, {
        x: 81,
        y: 90
    }, {
        x: 36,
        y: 100
    }, {
        x: 0,
        y: 73
    }, {
        x: 0,
        y: 27
    }],
    fill: '#AAFFDD',
    strokeWidth:0.2,
    tension: 1.1
});

（链接仅用于历史目的，它不再有效） Check It in a fiddle~jsfiddle.net/jaibuu/VUzKP/

【讨论】：

【解决方案2】：

这里是绘制一堆同心旋转多弧形状的代码

此代码可让您定义多边形的边数以及圆弧的插入大小。

此代码只是从下到上堆叠形状，但您始终可以使用 ctx.globalCompositeOperation="destinationover" 在当前形状后面绘制。

这是代码和小提琴：http://jsfiddle.net/m1erickson/KkteA/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        drawArcInsetPolygon(7,100,.8,200,150,2,"gray","pink",-90);

        drawArcInsetPolygon(7,100,.8,200,150,2,"gray","white",45);

        function drawArcInsetPolygon(sideCount,size,arcInset,centerX,centerY,strokeWidth,strokeColor,fillColor,rotationDegrees){
            var radians=rotationDegrees*Math.PI/180;
            ctx.save();
            ctx.translate(centerX,centerY);
            ctx.rotate(radians);
            ctx.beginPath();
            ctx.moveTo (size * Math.cos(0), size *  Math.sin(0));          
            for (var i = 1; i <= sideCount;i += 1) {
                  var cpX= (size*arcInset) * Math.cos((i-.5) * 2 * Math.PI / sideCount);
                  var cpY=( size*arcInset) * Math.sin((i-.5) * 2 * Math.PI / sideCount);
                  var endX= size * Math.cos(i * 2 * Math.PI / sideCount); 
                  var endY= size * Math.sin(i * 2 * Math.PI / sideCount);
                  ctx.quadraticCurveTo(cpX, cpY, endX,endY);
            }
            ctx.fillStyle=fillColor;
            ctx.strokeStyle = strokeColor;
            ctx.lineWidth = strokeWidth;
            ctx.stroke();
            ctx.fill();
            ctx.restore();        
        }

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

【讨论】：

你的问题很有趣——带有弧线扭曲的正多边形！你觉得这个答案有用吗？