人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

androidの図形描画についての質問です。

CANVASにdrawRectでハート型を描画したいと思っています。
色々検索してみましたが、ハート型のサンプル等がなく困っています。

ハートを描画するコードやサンプルが載っているURL等教えていただけないでしょうか。

よろしくお願いします。


●質問者: newprogramer
●カテゴリ:インターネット
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● なぽりん
●100ポイント

drawRectそのものは長方形を描く命令なので使えないとおもいます。drawRoundrectでもむずかしいとおもいます。
ハート型はみつけました。

http://jsdo.it/debiru/q47m わりあいにキレイに書けているとおもいます。

http://www.smashious.com/an-introduction-to-html5-canvas/473/ ちょっとみみがとんがってる。ベジェ曲線で描いたようです。

http://blog.ganeshzone.net/index.php/2010/12/drawing-a-simple-shape-with-the-html5-canvas/ エラが出てる

====
http://wonderfl.net/c/ca6d/read
204行からハートを書いているようですが、Flashでした


a-kuma3さんのコメント
四番目の「線分AB上のアリア」のやつは、Flash (ActionScript) なので canvas ではないですね。

なぽりんさんのコメント
3?4番目は消してしまったほうがいいかしら。まぎらわしいことをしてすみません。

a-kuma3さんのコメント
順番を入れ替えましたね。 三番目の「わりあいキレイに書けている」は、きちんと canvas を使ってますよ。

なぽりんさんのコメント
ありがとうございます(しっかり読み込んでの判別ができてなくてすみません)。 「わりあいキレイ」をトップにいれかえました。 数学的にも美しい感じの式ですが、常人じゃ考えつかなさそう。 それに、曲線形状の変更はむずかしそうですね。

a-kuma3さんのコメント
>> 数学的にも美しい感じの式ですが、常人じゃ考えつかなさそう。 << こんなのがあった。 http://d.hatena.ne.jp/Zellij/20111205/p1 http://homepage3.nifty.com/kuebiko/science/freestdy/MthHeart.htm http://www16.ocn.ne.jp/~akiko-y/heart/index_heart.html

newprogramerさんのコメント
回答ありがとうございます。 おっしゃる通りdrawrectは四角形でした^^; 結局描けませんでしたが参考になりました。 ありがとうございます。

2 ● だわかき
●100ポイント

No.1の方が回答しているように、drawRect()は長方形を描く命令なのでハード型は描けません。
ベジエ曲線を描くbezierCurveTo()を使えばできます。
以下のコードを試してみてください。

<canvas id="canvas4" width="140" height="140"></canvas>
<script type="text/javascript">
 var canvas = document.getElementById("canvas4");
 var ctx = canvas.getContext("2d");
 ctx.beginPath();
 ctx.moveTo(75,40);
 ctx.bezierCurveTo(75,37,70,25,50,25);
 ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
 ctx.bezierCurveTo(20,80,40,102,75,120);
 ctx.bezierCurveTo(110,102,130,80,130,62.5);
 ctx.bezierCurveTo(130,62.5,130,25,100,25);
 ctx.bezierCurveTo(85,25,75,37,75,40);
 ctx.fill();
</script>

a-kuma3さんのコメント
こんな風に見えるんですって。 [https://mdn.mozillademos.org/files/207/Canvas_bezier.png:image] https://developer.mozilla.org/samples/canvas-tutorial/2_6_canvas_beziercurveto.html http://www.endo-yuta.com/2011/06/html5-canvas.html#canvas4

newprogramerさんのコメント
jsのコードでしたので、drawpathで描画してみましたが形が歪になってしまいました・・・ ただ、考え方は大変参考になりました。 ありがとうございます。

a-kuma3さんのコメント
今更になって気が付いた。 CANVAS って言ってたのは、java の android.graphics.Canvas のことを言ってたのか。

3 ● a-kuma3
●0ポイント

面白そうなんで、ぼくも参戦。

式は、こちらに書いてあるものを使いました。
http://stackoverflow.com/questions/14325779/draw-heart-shape-android-canvas?rq=1

ちょっと分かりにくいので、そこに書いてある wolframalpha.com へのリンクがこちら。
http://www.wolframalpha.com/input/?i=polar%20r=%28sin%28t%29*sqrt%28abs%28cos%28t%29%29%29%29/%28sin%28t%29%20%2b%207/5%29%20-2*sin%28t%29%20%2b%202

r=¥frac{sin(¥theta) ¥sqrt{¥left| cos(¥theta) ¥right| }}{sin(¥theta) + ¥frac{7}{5} } -2 sin(¥theta) + 2


jsFiddle で試してみたのが、こちらです。
http://jsfiddle.net/a_kuma3/FtuCj/embedded/result/

どうでしょ。
結構、きれいに描けていると思いますけど ;-)


ソースは、こっちの方が見やすいです。
http://jsfiddle.net/a_kuma3/FtuCj/

式が極座標の式だったので、θを刻んでループで回して、極座標を直交座標に変換して、canvas のサイズに直して、各点を直線で結んでます。
んで、最後に塗りつぶし、という感じです。



追記です。
ちょっと長いですけど、ソースも貼っときます。

<style type='text/css'>
#canvas-h {
 border: 5px inset pink;
 background: #fff;
}
</style>
 
<script type='text/javascript'>

window.onload=function() {

 /*
 http://stackoverflow.com/questions/14325779/draw-heart-shape-android-canvas?rq=1
 */
 function heart_function(t) {
 var r = (Math.sin(t)*Math.sqrt(Math.abs(Math.cos(t))))/(Math.sin(t) + 7.0/5.0) -2*Math.sin(t) + 2.0;
 return r;
 }

 CoordSupport = function() {
 this.init = function(cw, ch, x_min, x_max, y_min, y_max) {
 this.width_ = cw;
 this.height_ = ch;
 this.x_min_ = x_min;
 this.x_max_ = x_max;
 this.y_min_ = y_min;
 this.y_max_ = y_max;
 this.dx_ = (x_max - x_min) / cw;
 this.dy_ = (y_max - y_min) / ch;
 };
 this.pixel = function(x, y) {
 var px = (x - this.x_min_) / (this.x_max_ - this.x_min_) * this.width_;
 var py = (this.y_max_ - y) / (this.y_max_ - this.y_min_) * this.height_;
 return {"x": px, "y": py};
 };
 };

 function draw_heart() {

 var canvas = document.getElementById('canvas-h');
 if (!canvas || !canvas.getContext) {
 alert("not support CANVAS !");
 return false;
 }

 var cs = new CoordSupport();
 cs.init(300, 350, -3, 3, -5, 2);
 canvas.width = cs.width_;
 canvas.height = cs.height_;

 var ctx = canvas.getContext('2d');
 ctx.strokeStyle = "pink";

 ctx.beginPath();
 var p = cs.pixel(0, 0);
 ctx.moveTo(p.x, p.y);

 var PI2 = Math.PI * 2.0;
 var dt = PI2 / 360;
 for (t = 0 ; t <= PI2 ; t += dt) {
 var r = heart_function(t);
 var x = r * Math.cos(t);
 var y = r * Math.sin(t);
 p = cs.pixel(x, y);
 ctx.lineTo(p.x, p.y);
 }
 ctx.stroke();

 ctx.fillStyle = "pink"
 ctx.fill();

 ctx.closePath();
 }

 draw_heart();
}

</script>


<canvas id="canvas-h"></canvas>

newprogramerさんのコメント
URLをIEで開こうとするとエラーになって表示されませんでした・・・ 計算式だけ見ると、とても難しそうですね^^;

a-kuma3さんのコメント
こっちも見られないでしょうか? http://jsfiddle.net/a_kuma3/FtuCj/show/ IEだと、IE8以前では、そもそも canvas に対応してないので見られません。 数式は難しくても、プログラムには、そのまま書くだけなんで。 ぼくも、何であの形になるのかは、さっぱり ┐(´-`)┌

a-kuma3さんのコメント
ちょっと長いですけど、ソースも貼っときました。

4 ● holoholobird
●100ポイント

描画の考え方としては、英語のサイトになりますがこちらが有用になると思います。
http://www.zzzxo.com/q/answers-android-how-to-draw-triangle-star-square-heart-on-the-canvas-7007429.html

描画にはandroid.graphics.Canvasの仕様上、ハート曲線の数式が必要になりますが、ハート曲線は簡単なものから難しいものまで数多く開発されてきましたので、こちらで気に入った曲線を探し出し、androidに導入のが都合がいいと思います。

http://www.mathematische-basteleien.de/heart.htm

どの曲線を使用するのかわからないため、コードの記載は行いませんが、どのハートが気に入ったのかを教えてくださればコードでの回答を行います。


newprogramerさんのコメント
回答ありがとうございます。 ハートの計算がなかなかうまくいかずに困っていました^^; 本当は丸投げになってしまいますのでよろしくないと思いますが、今回はよろしくお願いします。 ちなみにMETHOD1になります。

5 ● boost_beast
●0ポイント

http://leo.nit.ac.jp/~mukuda/s2011_android/03/page3-2.htm

こちらをみてみるのはどうでしょうか。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ