绘制一个形状堆栈

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

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

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

对于弯曲的两侧，我不认为有一个库自动执行此操作。我可能需要手动去做，例如在画布中使用圆弧（）。

A stack of shapes

来源

2013-03-11 moey

HTML5支持多边形..所以，用一点点的研究，你可以使它工作 – Ronnie 2013-03-11 20:02:53

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

enter image description here

此代码，您可以定义边数在多边形以及插图你的弧的大小。

此代码只是从下到上堆叠形状，但您始终可以使用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>

来源

2013-03-11 20:35:50 markE

看到上面的编辑会自动在多边形上绘制弯曲的边... – markE 2013-03-13 00:14:57

你的问题是相当有趣的 - 正则多边形与弧形扭曲！你觉得这个答案有用吗？ – markE 2013-03-20 03:18:05

帆布应该是非常有能力让您轻松复制，修改和重新绘制图纸:)后面的元素。

简单的东西，如2013年3月，我会建议使用Kinetic JS

斑点会让你拱形边的多边形容易像这样：

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

（链接仅为历史的目的，它不再有效）检查它在一个小提琴〜jsfiddle.net/jaibuu/VUzKP/

来源

2013-03-11 21:07:02 Jaibuu

绘制一个形状堆栈

回答

相关问题