1

図形のスタックで構成される画像を生成する Web ツールを構築しようとしています。各形状要素は、1 つの元の形状から派生します。派生は基本的に、xピクセルずつ拡張し、 y度回転させてから、スタックの「最後」に配置することによって作成されます。下の図では、元の形状は白い 7 角形で、側面がわずかに湾曲しています。ピンクの派生物は、次の手順で作成されました。

  1. 白い七角形をコピーして 10 ピクセル拡大します。
  2. +/- 8 度回転させます。
  3. 白い七角形の後ろに置きます。

私の質問は、このタスクを実行するのに適した (そして最も単純な) Web テクノロジはどれですか? HTML5 キャンバス、SVG、または WebGL? 私はキャンバスに傾いていますが、サポートされているのは 1 つのプリミティブ形状、つまり四角形のみです。

曲線的な側面については、これを自動的に行うライブラリはないと思います。キャンバスでarcs()を使用するなど、手動で行う必要があるかもしれません。

シェイプのスタック

4

2 に答える 2

1

キャンバスは、図面の背後にある要素を簡単に複製、変更、および再描画できるようにする機能が非常に優れている必要があります:)。

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-11T21:07:02.627 に答える
1

同心円状に回転した多円弧形状のスタックを描画するコードは次のとおりです。

ここに画像の説明を入力

このコードを使用すると、多角形の辺の数と円弧の挿入サイズを定義できます。

このコードは形状を下から上に積み重ねるだけですが、いつでも 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-11T20:35:50.963 に答える