【Unity】【UI Toolkit】Painter2Dを使ってベクターグラフィックスを描く（基礎編） - LIGHT11
UnityのUI ToolkitでPainter2Dを使ってベクターグラフィックスを描画する方法についてまとめました。 Painter2Dとは？ 直線を描画する 動作確認 線の端や結合部分の形状を設定する 塗りつぶす 円を描画する 曲線を描画する 関連 参考 Unity 2022.2.19 Painter2Dとは？ UI Toolkitでは、以下の記事のようにMeshGenerationContextを使って任意のメッシュを作成してUIを描画することができます。 light11.hatenadiary.com Painter2Dは内部的にこれを使用した、ベクターグラフィックスを簡単に扱うための機能です。 本記事ではこのPainter2Dの概要と、簡単な使い方について紹介します。 なおPainter2DはUnity2022.1から使えます。 直線を描画する まず、Painter2Dの基本的な
イラレの生成AIが凄いので Live - 2023/10/11 Adobe MAX 2023｜CreativeEdge Vlog
Adobe Illustraor 28.0に搭載された生成AI（ベクターグラフィックの生成）が衝撃的だったので、このページにまとめていきます。 イラレの生成AIの探求は以下の新しいページに掲載しています 新しいイラレ生成AI関連ページイラレの生成AIでハロウィンのイラストを描こう！ イラレの生成AIでイラストを描くLive - 2023/10/14-15 Adobe Illustrator「イラレの生成AIを探求する」ライブ配信 イラレで生成したベクターグラフィック本日からロスアンゼルスでAdobe MAX 2023がスタートしましたが、遂にAdobe Illustrator（バージョン28.0）に「テキストからベクター生成 (Beta)」が実装されました。Adobe Fireflyのベータ版が登場した時から待機リストに掲載されていたので、いつ搭載されるのか注目していました。 参考：Ill
ChatGPTにSVGでお絵描きさせる｜temoki / Tomoki Kobayashi
ChatGPTはテキストを生成するGenerative AIであるが、SVGのようなテキストフォーマットの画像であれば描くことができるのではないか？と思い、試してみることにした。モデルにはGPT-4を使用し、GPTにひよこ🐤を描かせることをゴールとして始める。 (私) svgのフォーマットを知っていますか？はいかいいえで答えてください。 (ChatGPT) はい (私)では、svgのコードをあなたに書いてもらいます。まずは正方形のsvgコードを書いてみてください。 (ChatGPT) 以下のコードは、SVGフォーマットで正方形を描画するものです。 このコードでは、正方形の大きさを100x100ピクセルに設定し、色を青（blue）に設定しています。必要に応じて、大きさや色を変更してください。 ChatGPTが描いた正方形 （これは簡単だろう）<svg width="100" height=
Convert PNG, JPG files to SVG vectors online - Vectorizer.AI
PICK Pick a bitmap image that you want to vectorize and drag and drop it onto the page. Bitmap images, such as JPEGs and PNGs, are represented as a grid of little squares called 'pixels', each with its own color. PROCESS We analyze, process, and convert your image from pixels to geometric shapes. The resulting vector image can be scaled to any resolution without getting blurry, and can be used to
ScalableDots - 綺麗に拡大出来るドット絵生成ツール
ドット絵は SVG 画像にすれば綺麗に拡大出来る！ ドット絵なのにベクター画像？そう、二アレストネイバー法なんてもう知らなくてもいい！ ScalableDots とは ScalableDots は PNG や GIF などの画像ファイルを SVG 画像に変換するツールです。元の画像にある各ピクセルを一つずつ、SVG 上の要素に置き換えて元の色で塗りつぶすことで変換を行っています。主な用途としては、ドット絵 (Pixel art) を SVG に変換するために使います。 ドット絵を Web で公開する場合、等倍で表示すると小さすぎてドット絵としての魅力が十分に伝わらないので、一般には拡大して表示するようにしますが、SVG 画像として公開する事で任意の倍率で綺麗に拡大することが出来るようになります。 なぜ SVG？ 元のドット絵を拡大する際、ラスター画像の画像拡大アルゴリズムによってはぼやけた
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかなと思います 結論から 僕が考える現時点でのWebアプリでの帳票印刷のベストプラクティスは、 Adobe XD や Figma で帳票のレイアウトをデザイン
Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き） - Qiita
こんにちは。UX＆フロントエンジニアしながら絵描きして遊んでいるゆき(@yuneco)です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら： https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る SVGを
SVGを使うときに知っておくといいことをまとめました - Qiita
アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。 もし、「ここが間違ってるよ」とか「こうしたほうがいいよ」みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意すること サイズ削減のためにすること 「オブジェクト」→「パス」→「単純化」でアンカーポイントの数を最小化する（見た目を損なわない程度に留めます） 非表示にしているレイヤーを削除する（非表示レイヤーも書き出されます） 1回しか使わないシンボル図形
なぜ我々はいまだに文字列でコメントを書いているのか - Qiita
あるいは、画像コメントのすすめ。 TL;DR 画像コメントのほうが意図が伝わりやすい 画像URLからツールチップで画像表示してくれるVSCode拡張機能があるよ その場で画像を作るSVGエディタもあったよ 問題提起 みなさんは、少し複雑なアルゴリズムを書くことになったときどうしていますか。 たいていの場合、いきなりコーティングに取り掛かるのでなく、 雰囲気をつかむためメモやホワイトボードに落書きすると思います。 特に幾何計算では簡単なものでも図を描いた方がいいです。こんな感じ。 図を書いたら後はコードに落とすだけです。 ね、簡単でしょう？ // 指定した直線を対称軸としたときの指定した点の鏡映位置を返す function flipVectorByLine(p: Vector, line: Line): Vector { // TODO: よくわかるコメントを書く const ln = ne
【Unity】Unityでベジェ曲線（パス）を描く方法 - テラシュールブログ
今回はUnityで曲線を描く方法について紹介します。 Unity 2018.1でVector Graphicが導入可能に Vector Graphicsでベジェ曲線を描画する Vector GraphicsのAPIを見てみる PathのAPIを見てみる 感想 関連 Unity 2018.1でVector Graphicが導入可能に Unity 2018.1からVector Graphicsのプレビュー版が導入可能になり、SVGといったフォーマットのファイルも使用可能になりました。 ファイルサイズの割にエッジの綺麗な絵を出しやすいのが良いですね tsubakit1.hateblo.jp 今回はそのランタイムAPIを使用して線を描画してみます。 なおVector Graphicsはその設計上、UIには使用できません。Graphicコンポーネントを拡張すれば行けるかもしれませんが、云々。 Vec
Unity 2018.2 からSVGファイルが使える様になりました - 強火で進め
Unity 2018.2 から SVG ファイルが使える様になりました。 しかし、デフォルトの状態では使えません。使いたい時には Package Manager を開き、 All タブを選択→ Vectorgraphics をインストールして下さい。 Vectorgraphics がインストールされていると SVG ファイルをインポートすると Prefab 化され、それをシーンに追加すると Sprite として使用できます。 形状に沿った形のポリゴンが作成されて表示されているので拡大してもかなり綺麗な表示となります。 拡大した時のクオリティを一段と上げたい場合にはテセレーションを行う事も出来ます。 一般的なテセレーションではよりポリゴンをより細かく分割しますが分割数を減らす調整も可能な様です。 SVGを使ってみたサンプルプログラムはこちらからダウンロード出来ます。 Vectorgraphi
【Unity】Unityでベクターグラフィック（SVG）を利用する - テラシュールブログ
https://github.com/Unity-Technologies/vector-graphics-samples/blob/master/Documentation/vectorgraphics.md UnityのPackageManagerにSVGを利用するライブラリが追加されました。 Unity 2018.1でプレビュー版を使用することが出来ます。 どんな事が出来るの？ 使い方 関連 どんな事が出来るの？ 機能については下の動画を見てもらう方良さそうです。 結構色々なことが出来るみたいです www.youtube.com 使い方 PackagesのManifest.jsonの中身に以下の行を追加します。 "registry": "https://staging-packages.unity.com" そうするとステージングのPackageManagerにアクセス出来るので、あ
【Unity】SVG 形式のファイルを Unity で使用できるようにする「Vector Graphics Samples」紹介 - コガネブログ
はじめに Unity 2018.1 ベータ以降であれば、 「Vector Graphics Samples」を Unity プロジェクトに導入することで SVG 形式のファイルを Unity で使用できるようになります 導入方法 Unity プロジェクトの「Packages」フォルダ内の「manifest.json」に 下記のコードを記述します { "dependencies": { "com.unity.vectorgraphics": "1.0.0-preview.5" }, "registry": "https://staging-packages.unity.com" } そして、Unity プロジェクトに戻ることで、 「Vector Graphics Samples」が使用できるようになります 使い方 SVG ファイルを Unity プロジェクトに追加すると、 このようにプレハブ
SVG アニメーションツール Shape Shifter の使い方｜Goodpatch Blog グッドパッチブログ
Goodpatch Advent Calendar 2017では、Goodpatchのメンバーが興味を持っている分野や、利用している技術などについて書いていきます。 ダウンロードのプログレスバーやボタンを押した時のフィードバックなど、アニメーションはアプリに欠かせない要素の一つです。今回は Shape Shifter というツールをご紹介したいと思います。 Shape Shifterとは？ alexjlockwood/ShapeShifter にもあるとおり、 SVG 形式のアイコンのアニメーションを作成するためのツールです。 Shape Shifter の画面構成 まずは Shape Shifter の画面構成を見てみましょう。この記事では下図の名称で呼ぼうと思います。 プレビュー画面 アニメーションのプレビューを確認できます。 左からスローモーション、巻き戻し、再生、早送り、繰り返しの
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
C#でモダンにスクレイピングするならAngleSharp - Qiita
C#やVB.NETでWebページをスクレイピングする方法をWeb検索するとHtml Agility Packが見つかることが多いですが、APIはXHTMLやXPATHといったXML技術をベースにしているので、今これを使うのは少々やぼったい印象があります。 じゃあ何がいいのか？ということですが、私はAngleSharpを強くお勧めします。 AngleSharpの利点 AngleSharpのどこがいいのか？は、改めて別の記事を書くつもりですが、ここでは簡単にまとめます。 HTMLだけでなく、SVG、MathML、CSSもパース可能です。 HTMLをパースするとW3CのWeb標準に従ったDOMが構築されます。HTML5ベースのため、閉じる必要のないタグ（<br>や<img>など）や閉じタグを省略可能なタグ（<li>、<dt>や<dd>、<tr>や<td>など）も正しく理解します。 Selecto
VectorDrawableの穴を塞がないようにする - Qiita
vector_be_winding というツールを作ったので宣伝がてら VectorDrawableのハマりやすい「穴」について書こうと思います。 VectorDrawableの「穴」 VectorDrawableというのは拡大縮小できて DPIごとに生成とかしなくて良くて便利なものです。その導入の仕方などについては VectorDrawable対応まとめ などにあるのでそちらを参考にしてください。この稿ではそこらでは扱われない「穴」について書きます。 それは論理的なものでも心理的なのでもなく、物理的な穴です。例えば図のような非常に簡単な四角形があったとします。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
About Vector Graphics | Vector Graphics | 1.0.0-preview.34
GitHub - nbedos/termtosvg: Record terminal sessions as SVG animations
