付箋の自動フォントサイズ調整
canvasの文字列のメトリクス
:var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);幅しか取れない
SVGの時は<br/>を挿入できたがcanvasではできなさそう
英文複数行表示
単語で刻んでメトリクスを測っている
文字の間にbreakable:0/1の属性があると考えられる
とりあえず日本語をターゲットにして全部1にしておく
lineheight
point 0,0 でsize:100で333と書いてgetBoundsすると
ctx.measureText("333")
TextMetrics {width: 166.845703125}
window.x.textItem.getBounds()
Rectangle {_x: -98.54999542236328, _y: -50, _width: 197.09999084472656, _height: 120, _owner: PointText, …}
"33"だと
textItem.getBounds()
Rectangle {_x: -98.54999542236328, _y: -50, _width: 131.39999389648438, _height: 120, _owner: PointText, …}
ctx.measureText("33")
TextMetrics {width: 111.23046875}
paper.getBounds.heightは単純にfontsize * 1.2
Related Pages
- →regroup×プロジェクトのタスク管理をscrapboxでやる×オフラインでも新規マップの作成が出来る×モバイル書き出しツール×共同編集ほんとに必要？×保存のテスト×pkakidashi×ptegaki×ノートテイク実験×図には3種類ある×考えるための図×自分の知的生産性向上×伝えるための図×共有するための図×まずは徹底して自分のニーズを満たさなければいけない×今選択してるスタイルが画面上で表示されているべき×regroup2020-01-27×regroupを使いたくなるシチュエーション×scrapboxからのインポート×scrapbox通りの見栄えを目指さない×画像付箋の原寸表示×スタイル変更uiの改善×投げ縄選択はゴーストにならない×フィードバック×パスの自動グループ化×pregroup2019×pregroup-done-2020×pRegroup-done-2019→
- →pRegroup-done-2019×講演スライドの流し込まれたマップを作る×反響まとめをマップにする×ユースケースメモ:発表資料をゼロから作る×ユースケースメモ:パネルディスカッションの準備×ユースケースメモ:過去のスライドの整理×ユースケース:ボットとの会話ログの整理→
- →付箋・パスの投げ縄選択×選択されたもののグループ化×表札の表示×グループの子要素の位置を再帰的に更新×コネクタ×グループの中の付箋をドラッグで出し入れ・配置変更×表札の編集×バルーンメニュー×グループ化×regroup2018×付箋の圧縮展開×圧縮付箋の展開時どうなるべきか×既存グループの付箋追加削除ui×pRegroup-done-2019→
- →付箋をたくさん出すと重い×今表示している画像の取得×画像化してズームする際にずれる問題の解決×ズーム完了時にPaperに反映する×なぜかツールバーにかぶる問題×pRegroup-done-2019→
- →pRegroup-done-2019×付箋の追加をPaper.js上で実装する×100枚付箋のiPad上での拡大縮小×hosting×二本指ジェスチャ時に一本指での描画が同時に発生する問題×ios上のchromeでデバッグ出力→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]