0

私はこのプロジェクトに取り組んでおり、3つの主要なイベントに一種のタイムラインが必要です。

各イベントをチェックマークの画像で表します。（これらのイベントが正しく発生したかどうかに応じて、チェックマークは緑、黄、または赤で表示されます）。したがって、これらの画像はDjangoテンプレート言語を使用して動的に生成されます。

次に、これら3つの画像を、1番目から2番目、2番目から3番目に線または矢印を使用して接続します。

次のようになります。画像を表示するには、ここをクリックしてください

これで、すばやく汚い方法は、これらの灰色のバーを画像として追加し、5つの画像を一緒にフロートさせることです。しかし、それは解像度スケーリングの問題を引き起こします。

この線を動的に描く方法はありますか？助けてください！

編集：私はこれをIE 7などに使用する必要があるため、HTML5を使用できません。また、カスタムのPythonグラフィックプラグインはやり過ぎだと思います。

4

3 に答える 3

0

だから私はついにこれをハッキーな方法でやった。

3つのチェックマーク画像のそれぞれに5つのテーブルセル（divも使用できますが、特定のアプリケーションではテーブルが必要です）を使用し、各チェックマークの間に2つのセルを使用してバー/線を描画しました。

を使用して2つのセル内にバーを描画しました。

<td style="background-position:center center !important; 
background:url('{{ MEDIA_URL }}img/bar-grey.png') ; 
background-repeat:repeat-x; width:300px !important;  
padding-left:0px !important; padding-right:0px !important; ">

これで、circle-image-checkmarksには触れず、バーに切れ目がありました。そこで、チェックマークセルに100pxの固定幅を設定しました。また、上記と同様のコードを使用して、円セルの背景としてバーを適用することにより、バーを円に接続しました。

私が抱えていた課題の1つは、中央の円の両側に異なるカラーバーがある場合があることでした。また、最初と最後の円については、バーはそれぞれ右半分と左半分で描画する必要がありました。

だから私はこのSOリンクをたどり、なんとかそれを達成することができました。

于 2012-07-04T15:36:02.917 に答える
0

PILまたはPycairoのどちらでも、それらを描画できます。で使用する別のビューを作成しimg、PNGデータを返すようにします。

于 2012-07-02T23:19:53.277 に答える
0

canvas 要素に線を描画し、その上に 2 つの画像をレンダリングする例を次に示します。

Ignacio は正しいですが、IE < 9 が canvas をサポートしているとは思えないため、ブラウザの問題が発生します。

<html>
<head>
<style type="text/css">
canvas {
    width: 600;
    height: 200;
}
</style>
</head>
<body>

<canvas id="canvas">
</canvas>
<script type="text/javascript">
(function () {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var i = new Image();
    i.src = 'https://www.balancedpayments.com/images/balanced.png';
    i.onload = function () { ctx.drawImage(i, 100 - i.width / 2, 100 - i.height / 2); };

    var j = new Image();
    j.src = 'https://www.balancedpayments.com/images/balanced.png';
    j.onload = function () { ctx.drawImage(j, 300 - i.width / 2, 100 - i.height / 2); };

    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(500, 100);
    ctx.stroke();
})();
</script>
</body>
</html>
于 2012-07-02T23:47:23.493 に答える