一个小巧的绘图应用程序。___下载.zip

<div style="text-align: center; transform: scale(.5);"> <img src="https://github.com/tldraw/tldraw/raw/main/assets/card-repo.png"/> </div> # @tldraw/core This package contains the `Renderer` and core utilities used by [tldraw](https://tldraw.com). You can use this package to build projects like [tldraw](https://tldraw.com), where React components are rendered on a canvas user interface. Check out the [advanced example](https://core-steveruiz.vercel.app/). ���� Love this library? Consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok). ## Installation Use your package manager of choice to install `@tldraw/core` and its peer dependencies. ```bash yarn add @tldraw/core && yarn build # or npm i @tldraw/core && npm run build ``` > Note: You'll need to run the `build` script before running `dev`. ## Examples There are two examples in this repository. The **simple** example in [`examples/core-example`](https://github.com/tldraw/tldraw/tree/main/examples/core-example) shows a minimal use of the library. It does not do much but this should be a good reference for the API without too much else built on top. The **advanced** example in [`examples/core-example-advanced`](https://github.com/tldraw/tldraw/tree/main/examples/core-example-advanced) shows a more realistic use of the library. (Try it [here](https://core-steveruiz.vercel.app/)). While the fundamental patterns are the same, this example contains features such as: panning, pinching, and zooming the camera; creating, cloning, resizing, and deleting shapes; keyboard shortcuts, brush-selection; shape-snapping; undo, redo; and more. Much of the code in the advanced example comes from the [@tldraw/tldraw](https://tldraw.com) codebase. If you're working on an app that uses this library, I recommend referring back to the advanced example for tips on how you might implement these features for your own project. ## Usage Import the `Renderer` React component and pass it the required props. ```tsx import * as React from "react" import { Renderer, TLShape, TLShapeUtil, Vec } from '@tldraw/core' import { BoxShape, BoxUtil } from "./shapes/box" const shapeUtils = { box: new BoxUtil() } function App() { const [page, setPage] = React.useState({ id: "page" shapes: { "box1": { id: 'box1', type: 'box', parentId: 'page', childIndex: 0, point: [0, 0], size: [100, 100], rotation: 0, } }, bindings: {} }) const [pageState, setPageState] = React.useState({ id: "page", selectedIds: [], camera: { point: [0,0], zoom: 1 } }) return (<Renderer page={page} pageState={pageState} shapeUtils={shapeUtils} />) } ``` ## Documentation ### `Renderer` To avoid unnecessary renders, be sure to pass "stable" values as props to the `Renderer`. Either define these values outside of the parent component, or place them in React state, or memoize them with `React.useMemo`. | Prop | Type | Description | | ------------ | ------------------------------- | ----------------------------------------------------------- | | `page` | [`TLPage`](#tlpage) | The current page object. | | `pageState` | [`TLPageState`](#tlpagestate) | The current page's state. | | `shapeUtils` | [`TLShapeUtils`](#tlshapeutils) | The shape utilities used to render the shapes. | | `assets` | [`TLAssets`](#tlassets) | (optional) A table of assets used by shapes in the project. | In addition to these required props, the Renderer accepts many other **optional** props. | Property | Type | Description | | -------------------- | ----------------------------- | --------------------------------------------------------------------- | | `containerRef` | `React.MutableRefObject` | A React ref for the container, where CSS variables will be added. | | `theme` | `object` | An object with overrides for the Renderer's default colors. | | `components` | `object` | An object with overrides for the Renderer's default React components. | | `hideBounds` | `boolean` | Do not show the bounding box for selected shapes. | | `hideHandles` | `boolean` | Do not show handles for shapes with handles. | | `hideBindingHandles` | `boolean` | Do not show binding controls for selected shapes with bindings. | | `hideResizeHandles` | `boolean` | Do not show resize handles for selected shapes. | | `hideRotateHandles` | `boolean` | Do not show rotate handles for selected shapes. | | `hideCursors` | `boolean` | Do not show multiplayer cursors. | | `snapLines` | [`TLSnapLine`](#tlsnapline)[] | An array of "snap" lines. | | `users` | `object` | A table of [`TLUser`](#tluser)s. | | `userId` | `object` | The current user's [`TLUser`](#tluser) id. | The theme object accepts valid CSS colors for the following properties: | Property | Description | | -------------- | ---------------------------------------------------- | | `foreground` | The primary (usually "text") color | | `background` | The default page's background color | | `brushFill` | The fill color of the brush selection box | | `brushStroke` | The stroke color of the brush selection box | | `selectFill` | The fill color of the selection bounds | | `selectStroke` | The stroke color of the selection bounds and handles | The components object accepts React components for the following properties: | Property | Description | | -------- | --------------------------------- | | `Cursor` | Multiplayer cursors on the canvas | The Renderer also accepts many (optional) event callbacks. | Prop | Description | | --------------------------- | ----------------------------------------------------------- | | `onPan` | Panned with the mouse wheel | | `onZoom` | Zoomed with the mouse wheel | | `onPinchStart` | Began a two-pointer pinch | | `onPinch` | Moved their pointers during a pinch | | `onPinchEnd` | Stopped a two-pointer pinch | | `onPointerDown` | Started pointing | | `onPointerMove` | Moved their pointer | | `onPointerUp` | Ended a point | | `onPointCanvas` | Pointed the canvas | | `onDoubleClickCanvas` | Double-pointed the canvas | | `onRightPointCanvas` | Right-pointed the canvas | | `onDragCanvas` | Dragged the canvas | | `onReleaseCanvas` | Stopped pointing the canvas | | `onHoverShape`