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


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

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

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/06/04 21:15:05
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答5件)

id:NAPORIN No.1

回答回数4906ベストアンサー獲得回数910

ポイント100pt

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でした

他4件のコメントを見る
id: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

2013/05/29 00:01:37
id:newprogramer

回答ありがとうございます。
おっしゃる通りdrawrectは四角形でした^^;

結局描けませんでしたが参考になりました。
ありがとうございます。

2013/05/29 20:52:27
id:dawakaki No.2

回答回数797ベストアンサー獲得回数122

ポイント100pt

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>
他1件のコメントを見る
id:newprogramer

jsのコードでしたので、drawpathで描画してみましたが形が歪になってしまいました・・・

ただ、考え方は大変参考になりました。
ありがとうございます。

2013/05/29 20:54:11
id:a-kuma3

今更になって気が付いた。
CANVAS って言ってたのは、java の android.graphics.Canvas のことを言ってたのか。

2013/05/30 00:24:58
id:a-kuma3 No.3

回答回数4974ベストアンサー獲得回数2154

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

式は、こちらに書いてあるものを使いました。
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>
他1件のコメントを見る
id:a-kuma3

こっちも見られないでしょうか?
http://jsfiddle.net/a_kuma3/FtuCj/show/
IEだと、IE8以前では、そもそも canvas に対応してないので見られません。

数式は難しくても、プログラムには、そのまま書くだけなんで。
ぼくも、何であの形になるのかは、さっぱり ┐(´-`)┌

2013/05/29 21:07:57
id:a-kuma3

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

2013/05/29 21:19:32
id:holoholobird No.4

回答回数574ベストアンサー獲得回数104

ポイント100pt

描画の考え方としては、英語のサイトになりますがこちらが有用になると思います。
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

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

id:newprogramer

回答ありがとうございます。

ハートの計算がなかなかうまくいかずに困っていました^^;
本当は丸投げになってしまいますのでよろしくないと思いますが、今回はよろしくお願いします。

ちなみにMETHOD1になります。

2013/06/04 19:12:07
id:boost_beast No.5

回答回数785ベストアンサー獲得回数31

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

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

  • id:NAPORIN
    ちなみに、UIのある市販描画アプリかとおもってしらべはじめたらhtml言語みたいなやつだったのでびっくりしました。
    ペンタブ系はオレにまかせろー!バリバリ! …あれぇ? みたいなw
  • id:cx20
    ■ js1k.com - demos - A lovely js competition
    http://js1k.com/2012-love/demos

    JavaScript の1000文字プログラミングのサイトです。
    ハートを表現するコードが沢山載ってます。

    トリッキーなコードが多いのであまり参考にならないかもしれませんが、興味がありましたらどうぞ。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません