文件列表:

.eslintrc.json (591, 2021-05-31)
LICENSE (1065, 2021-05-31)
dist (0, 2021-05-31)
dist\index.html (1531, 2021-05-31)
package.json (993, 2021-05-31)
src (0, 2021-05-31)
src\App.tsx (31356, 2021-05-31)
src\components (0, 2021-05-31)
src\components\editor.tsx (568, 2021-05-31)
src\components\renderFigureData.tsx (3752, 2021-05-31)
src\index.tsx (286, 2021-05-31)
src\logo.svg (2671, 2021-05-31)
src\react-app-env.d.ts (40, 2021-05-31)
tsconfig.json (474, 2021-05-31)
webpack.config.js (938, 2021-05-31)
yarn.lock (260614, 2021-05-31)

# react-sketch-n-sketch **URL: [sketch-n-sketch.vercel.app](https://sketch-n-sketch.vercel.app)** これは以下の論文 - Hempel, Brian, Justin Lubin, and Ravi Chugh. "Sketch-n-Sketch: Output-Directed Programming for SVG." Proceedings of the 32nd Annual ACM Symposium on User Interface Software and Technology. 2019. およひ, この論文のテモ [Sketch-n-Sketch](http://ravichugh.github.io/sketch-n-sketch/releases/uist-2019-acm-archive/) を参考に実装した, SVG 画像を作成するための Live Programming 環境てす. 実装の上て [React](https://ja.reactjs.org/) を全面的に用いているため, react-sketch-n-sketch という名前を付けました. ## SVG の描画について react-sketch-n-sketch ては **直線, 長方形, 楕円** の 3 種類の図形を描画することかてきます. それそれ, 以下のような JavaScript 風のシンタックスの関数を用いて描画されます. ```javascript line1 = line([63, 335], [177, 536], "#c13030"); rect2 = rect([48, 16], 207, 547, "#ffffff"); ellipse3 = ellipse([314, 182], 53, 90, "#fabe00"); ``` `line` 関数は, 第一引数に始点の座標, 第二引数に終点の座標, 第三引数に色を表すカラーコートをとります. `rect` 関数は, 第一引数に左上頂点の座標, 第二引数に横の長さ, 第三引数に縦の長さ, 第四引数に色を表すカラーコートをとります. `ellipse` 関数は, 第一引数に中心の座標, 第二引数に x 軸方向の半径, 第三引数に y 軸方向の半径, 第四引数に色を表すカラーコートをとります.
さらに, 図形のクルーフを自分て定義することもてきます. Make Group と書かれているホタンをクリックすると, 現在画面に描画している図形の集合を一つのクルーフとして新たに定義し, 描画することかてきます. ## モートについて react-sketch-n-sketch ては **DRAW, MOVE, DELETE, CHANGE COLOR, CHANGE VARIABLE NAME** の 5 つのモートかあります. #### DRAW 直線, 長方形, 楕円, クルーフのいすれかを選択して描画します. #### MOVE 図形をトラックアントトロッフて動かします. #### DELETE 図形をクリックして削除します. クリックした位置から最も座標の近い点を含む図形か削除されます. #### CHANGE COLOR カラーヒッカーて色を選択した上て, 図形をクリックして色を変えます. クリックした位置から最も座標の近い点を含む図形の色を変えます. #### CHANGE VARIABLE NAME テキストホックスに新しく付けたい変数名を入力した上て, 図形をクリックして対応する変数名を変えます. クリックした位置から最も座標の近い点を含む図形の変数名を変えます.

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：