Warning! We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more about our Privacy Policy and Cookie Policy
SVGを使った、軽量で強力なグラフィック描画ライブラリー「GraphicsJS」が登場。シンプルなゲームを例に、基本的な使い方を開発者自らが解説します。 HTML5は最近のWebにおける中心的な存在です。そして今日のインタラクティブな画像作成においては、SVGとCanvasが多くの人が好んで使う技術になっています。Flashは忘れ去られ、SilverlightはWebのどこかに生息する希少動物のユニコーンのようになり、サードパーティー製プラグインのことを覚えている人はほとんど見かけなくなりました。 SVGとCanvasについてそれぞれの長所も短所もよく議論されていますが、インタラクティブ要素を作成したり操作したりする場合にはSVGがより適しています。SVGはXML言語ベースのベクター形式であるため<svg>タグを使って画像をページに読み込めばすべてのエレメントがSVG DOMで利用可能にな
PDFのファイル構造を理解すると、テキストエディタでも直接PDFファイルを作ることができるようになります。このエントリーではPDFファイルの基礎要素を説明し、簡単なPDFファイルを例にしてファイル構造を説明します。更に、テキストを渡すとPDFファイルを吐いてくれる簡単なプログラムや、PDFを読み込んで簡単な解析をするプログラムを書いてみます。 目次 目次 まえがき オブジェクト 間接参照 ファイル構造 Hello, world! ヘッダ トレーラ 相互参照テーブル 本体 PDFを生成するプログラム 日本語の扱い方 日本語を含むPDFを生成するプログラム グラフィックス PDFを読むプログラム あとがき まえがき 1990年代前半、アドビシステムズは、どのプラットフォームやデバイスでも文書を確実に表示・共有できることを目的としてPDFファイルフォーマットを開発しました。 PDFの表示ソフト
(注記)この記事で紹介の「Snap.svg Animator」はすでに公開が終了しています。この記事の内容はアーカイブとして残していますが、動作しないためご注意ください。 SVGエス・ブイ・ジーとはHTMLでベクターグラフィックスを扱えるテクノロジーです。JPEGやPNGなどのラスターデータに対し、SVGはベクターデータのため拡大縮小に強いことが利点です。本記事ではこのSVGを使ってHTMLでアニメーションを実現する方法を紹介します。 まず前提としておさえておきたいのは、SVGでアニメーションやインタラクションを実装するには比較的低レベルのAPIの理解が必要となるということです。SVG 1.1 仕様の学習コストが高かったり、コンテンツ開発時の生産効率が上がらないといった課題が考えられます。そのためアニメーションやインタラクション用途のSVGコンテンツの開発にはJavaScriptライブラリ
スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。(編集部) Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ
SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );
SVG(Scalabe Vector Graphics)の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の(そして未来の)SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL(Syn
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
2015年1月28日 SVG, 便利ツール SVG(Scalable Vector Graphics)はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや?という方は、過去記事「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」をご覧ください! ↑私が10年以上利用している会計ソフト! ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
Graphics2Dに挑戦!Graphicsの高性能版「Graphics2D」を使って、より高度なグラフィック表現を目指そう! Graphics2Dとは? さて、先の連載で「Graphics」クラスを使った描画について簡単に説明しました。が、中には「ずいぶんと貧弱な機能しかないんだな」と思った人もいるかも知れません。Graphicsクラスは、Javaが誕生した当初から用意されていたもので、正直、かなり機能的には弱いものなのです。 そこで、Swingが登場したとき、同時に「Graphicsクラスを強化した新Graphicsクラス」というものも用意されました。「Graphics2D」というクラスです。実をいえば、皆さんが普段使っているGraphics(paintComponentで引数で渡されるGraphicsインスタンス)は、本当はGraphicsではなく、Graphics2Dなのです。 G
Swing コンポーネントの描画処理について解説します。通常、Swing コンポーネントの描画を拡張する場合は paint() メソッドでは無く paintComponent() メソッドをオーバーライドします。 AWT コンポーネントに何らかの図やイメージを描画するには paint() メソッドをオーバーライドしました。しかし、JComponent を継承する Swing コンポーネントの場合、paint() メソッドはコンポーネント全体の描画を総括するトップメソッドとして定義されています。 Swing コンポーネントは、コンポーネントの描画以外に、子コンポーネントの描画やコンポーネントの境界線となる枠を部品化しています。子コンポーネントの描画は paintChildren() メソッドで、境界線は paintBorder() メソッドで行われます。paint() メソッドはこれらのメソ
JComponentはほとんど全てのSwing コンポーネントの基底クラスで、Graphicsオブジェクトも持っています。下記のソースは、そのGraphicsを用いて画面に直線を描画するものです。 ソースコード package linecomp; import java.awt.Color; import java.awt.Graphics; import java.awt.Insets; import javax.swing.JComponent; import javax.swing.JFrame; import javax.swing.SwingUtilities; public class LineComp extends JComponent { public static void main(String[] args) { Runnable myGUI = new Runna
Javaプログラミング基礎 講義資料 今回は、簡単な絵をウィンドウ上に描いたり、 マウスで操作ができるようなプログラムについて学びます。 グラフィックス表示を行うための クラスライブラリの使い方を紹介します。 Javaでグラフィックス表示を行うために 代表的なAWTとSwingと呼ばれる機能を使います。 グラフィックスにおける座標の扱い Javaをはじめとする多くのグラフィックス環境では、 表示画面を細かい点の集まりとして扱います。この点のことを画素といいます。 そして、この点が画面上のどの位置かを示すために、 左上を原点 (0,0) とした座標を用います。 例えば、幅 640 、高さ 480 の大きさのウィンドウの座標は 下の絵のようになります。 数学のグラフの y 座標を上下逆にしたものだと考えることができます。 ウィンドウ上に位置を指定して図形や文字を書く場合や、 ウィンドウ上の範囲
AWTとSwingのペイントの仕組み 上質な描画コード(ペイントコード)がアプリケーションの実行性能を支える By Amy Fowler [原文] 訳:岩谷 宏 (updated: 080709) (小さな明朝文字の部分は訳者による注記です。) 文字しか使えなかった昔のコンピュータとちがって、グラフィックを駆使する今日のシステムでは、画面のどこを、いつ、何色に塗るかという決定と処理があらゆる瞬間に重要です。それを比較的容易に行い、グラフィックを使うユーザインタフェイス(GUI, graphical user interface)を楽に構築するために、画面の上にウィンドウを作ってそれらのウィンドウを操作するツールキット(windowing toolkit)(小さな部品的なソフトウェアの集まり)が、プログラムを開発するための基本的な枠組みとして使われます。 AWT(abstract wind
はじめに GUIに独自の表示を行うには、直接描画を行う機能が必要となります。このために用意されているのが、Graphicsクラスです。このクラスの基本的な使い方をマスターして、コンポーネントに自由に描画できるようになりましょう。 対象読者 Javaに興味がある、けれどプログラミング経験がない、という人。 Javaに興味がある、けれど何から手をつければいいか分からない、という人。 Javaに興味はない、でも何でもいいからプログラミングをしたい、という人。 グラフィック描画の仕組み AWTやSwingといったGUI構築のライブラリには、各種のコンポーネントが用意されています。これらを組み合わせれば、基本的な画面表示を行うことはでしょう。が、それ以上のことを行うには、独自に描画を行うための機能を理解する必要があります。 AWT/Swingのコンポーネントには、それぞれにGraphicsというクラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く