Raphaeljs untuk Gambar Vector di Web

Raphaël adalah nama sebuah pustaka javascript ringan yang dipakai untuk membuat gambar vector pada web. Dengan pustaka ini kita dapat membuat diagram, memotong gambar, memutar, dan sebagainya, secara sederhana dan mudah.

raphael

Raphaël [‘ræfeɪəl] mengikuti rekomendasi SVG dari W3C (konsorsium web) dan menggunakan Vector Markup Language (VML) sebagai dasar dalam membuat grafik. Dengan demikian, setiap objek gambar yang dibuat adalah objek DOM sehingga objek tersebut bisa diberi perlakuan atau event tertentu. Untuk saat ini (akhir tahun 2014), Raphaël bisa bekerja baik pada browser Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ dan Internet Explorer 6.0+.

Raphael dibuat oleh Dmitry Baranovskiy, seorang developer web dari Sydney, Australia. Dia merilis pustaka ini dengan lisensi MIT yang sifatnya gratis dan terbuka.

Raphael sangat mudah digunakan. Dengan berbekal sedikit pengetahuan tentang javascript dan HTML5, kita sudah dapat membuat gambar vektor sederhana.

Contoh 1: Membuat lingkaran

<!DOCTYPE html>
<html>
<head>
    <title>Tes Raphael</title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script>
            window.onload = function () {
                // membuat canvas 320 × 200 at 10, 50
                var paper = Raphael(10, 50, 320, 200);
                // Membuat lingkaran dengan x = 50, y = 40, dan radius 10
                var circle = paper.circle(50, 50, 50);
                // Mewarnai lingkaran dengan warna merah (#f00)
                circle.attr("fill", "#f00");
                // Mewarnai garis batas lingkaran dengan warna hitam (#000)
                circle.attr("stroke", "#000");
            };
        </script>
</head>
<body>
</body>
</html>

lingkaran merah

Contoh 2: Membuat animasi

<!DOCTYPE html>
<html>
<head>
    <title>Tes Raphael</title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script>
            window.onload = function () {
                var paper = Raphael("canvas", 640, 480);
                    paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
            };
        </script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>

animate

Contoh 3: Gambar bayangan

<!DOCTYPE html>
<html>
<head>
    <title>Tes Raphael Rotasi</title>
    <style media="screen">
        body {
            background: #333;
        }
    </style>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script>
        Raphael(function () {
            var img = document.getElementById("photo");
            img.style.display = "none";
            var r = Raphael("holder", 600, 540);
            r.image(img.src, 140, 140, 320, 240);
            r.image(img.src, 140, 380, 320, 240).attr({
                transform: "s1-1",
                opacity: .5
            });
            r.rect(0, 380, 600, 160).attr({
                fill: "90-#333-#333",
                stroke: "none",
                opacity: .5
            });
        });
        </script>

</head>
<body>
<div id="holder">
    <img id="photo" src="bd.jpg" width="320" height="240" alt="Test" />
</div>
</body>
</html>

mirror

Untuk belajar lebih lanjut, Anda dapat memanfaatkan file-file yang sudah saya jadikan satu folder berikut ini yang saya kompres dalam bentuk zip: raphaeljs.zip.

Berikut ini adalah beberapa link penting untuk mendalami pustaka Raphael:

Semoga bermanfaat!

Pos ini dipublikasikan di Developer dan tag , . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s