Giter Club home page Giter Club logo

kage-editor's Introduction

kage-editor

The glyph editor used on GlyphWiki

GlyphWiki で使用されている字形エディタ

Screen shot of kage-editor

This HTML5 / JavaScript app is the ported version from the previous glyph editor which was implemented as a Flash app.

この HTML5 / JavaScript アプリは、Flash で実装されていた以前のグリフエディタから移植されたものです。

macOS 上の最新版の Chrome / Firefox / Safari で動作確認しています。

導入方法

ソースコードは直接ウェブサイトに設置できる状態にはなっておらず、事前にビルド作業が必要になります。

ビルド作業を行う環境には Node.js がインストールされていることが必要ですが、生成されるのは静的サイトですから設置先のウェブサーバには Node.js などが無くても構いません。

(また、このリポジトリの gh-pages ブランチにビルド済みの(./build ディレクトリ下の)ファイルがあります。)

ビルド手順

Node.js (version 14 以上) をインストールしておいてください。

この git リポジトリをクローンします:

git clone https://github.com/kurgm/kage-editor.git
cd kage-editor

ビルドに必要なツール・ライブラリ等を ./node_modules ディレクトリに取得します:

npm install

ビルドを行います:

npm run build

ここまでの手順が成功すれば、ビルド結果は ./build ディレクトリに生成されています。 ./build ディレクトリをウェブサーバにコピー・配置してください。(他のディレクトリ(srcnode_modules など)をコピーする必要はありません。)

ブックマークレット

(最新の kage-editor を利用したいグリフウィキ利用者向け)

グリフウィキの編集中画面からジャンプできるブックマークレットです。

javascript:(function(l,f){l.href='https://kurgm.github.io/kage-editor/#ssl='+(l.protocol!='http:')+'&host='+l.host+'&name:page&edittime&related&data:textbox&summary'.replace(/(\w+):?(\w*)/g,function(e,k,n){return k+'='+encodeURIComponent(f[1].elements[n||k].value).replace(/%3A/g,':')})})(location,document.forms)

機能一覧

  • 筆画・部品をクリックで選択
  • 筆画・部品をCtrl+クリック or Shift+クリックで選択対象に追加/削除
  • 筆画・部品をドラッグで範囲選択
  • 背景をクリックで全選択解除
  • 選択筆画・部品の制御点の表示
  • 接続有無による制御点の色分け
  • 制御点ドラッグによる編集
  • 複数筆画・部品の拡大縮小
  • 筆画・部品をドラッグで移動
  • 選択筆画・部品の制御点の座標を表示
  • 線種・頭/尾形状の編集
  • 線種形状のエラー表示
  • ストレッチ係数の表示/編集
  • 部品分解
  • コピー/カット/ペースト
  • 1つ前/後を選択
  • 筆画・部品の並べ替え
  • 部品検索・挿入
  • 部品一覧から孫検索 (Shift+クリック)
  • サムネイル表示
  • アンドゥ/リドゥ
  • 手書き
  • グリッド
  • UI表示言語切替
  • 書体切替
  • 中心線表示
  • 白抜き表示
  • キーボードショートカット
    • Ctrl+A: 全選択
    • Ctrl+I: 選択反転
    • Ctrl+Z, Ctrl+Y: 元に戻す/やり直し
    • Ctrl+X, Ctrl+C, Ctrl+V: カット, コピー, ペースト
    • Del: 選択分を削除
    • 矢印キー / Ctrl+{H,J,K,L}: 選択分を1px移動 (Shift+ で5px移動)
    • Esc: 手書きモード終了, 選択解除
    • Ctrl+S: 編集終了

未対応の機能

  • 部品自動配置(不要?)
  • 回転・反転の追加

翻訳 / Translation

翻訳データは src/locales/ フォルダ内のJSONファイルで管理されています。 翻訳に誤りを発見した場合は報告・修正にご協力いただけると非常に助かります。

Localized messages are maintained as JSON files under src/locales/ folder. Feedback or correction of mistranslations is greatly appreciated if you find any.

kage-editor's People

Contributors

dependabot[bot] avatar graphemecluster avatar gwjjanggu avatar hulenkius avatar kurgm avatar liuxilu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.