From 11823009a8093e28048274eb682448f70f55566d Mon Sep 17 00:00:00 2001 From: tachibana-shin Date: Fri, 20 Oct 2023 10:28:52 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20fcanvas/?= =?UTF-8?q?docs@d8fa3061174022e9187c39cc64e3c653a5854f60=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 2 +- ...28a7e7.js => guide_plugins_communicate.md.d5bc4b0c.js} | 4 ++-- ...n.js => guide_plugins_communicate.md.d5bc4b0c.lean.js} | 0 ...md.e3bae651.js => guide_plugins_worker.md.14cf7c1d.js} | 4 ++-- ...1.lean.js => guide_plugins_worker.md.14cf7c1d.lean.js} | 2 +- guide/essentials/Group.html | 2 +- guide/essentials/Layer.html | 2 +- guide/essentials/Shape.html | 2 +- guide/essentials/Stage.html | 2 +- guide/essentials/computed.html | 2 +- guide/essentials/events.html | 2 +- guide/essentials/reactivity-fundamentals.html | 2 +- guide/essentials/watchers.html | 2 +- guide/extra-topics/performance.html | 2 +- guide/functions/nextTick.html | 2 +- guide/functions/other-utils.html | 2 +- guide/functions/reactivity-watch-api.html | 2 +- guide/introduction.html | 2 +- guide/overview.html | 2 +- guide/plugins/animate.html | 2 +- guide/plugins/communicate.html | 8 ++++---- guide/plugins/node.html | 2 +- guide/plugins/tile.html | 2 +- guide/plugins/worker.html | 6 +++--- guide/reusability/composables.html | 2 +- guide/shapes/Arc.html | 2 +- guide/shapes/Arrow.html | 2 +- guide/shapes/Circle.html | 2 +- guide/shapes/Custom.html | 2 +- guide/shapes/Ellipse.html | 2 +- guide/shapes/Image.html | 2 +- guide/shapes/ImageRepeat.html | 2 +- guide/shapes/Label.html | 2 +- guide/shapes/Line-Blob.html | 2 +- guide/shapes/Line-Polygon.html | 2 +- guide/shapes/Line-Spline.html | 2 +- guide/shapes/Line.html | 2 +- guide/shapes/Path.html | 2 +- guide/shapes/Rect.html | 2 +- guide/shapes/RegularPolygon.html | 2 +- guide/shapes/Ring.html | 2 +- guide/shapes/Sprite.html | 2 +- guide/shapes/Star.html | 2 +- guide/shapes/Tag.html | 2 +- guide/shapes/Text.html | 2 +- guide/shapes/TextPath.html | 2 +- guide/shapes/Wedge.html | 2 +- guide/styling/Fill.html | 2 +- guide/styling/filter.html | 2 +- guide/styling/transform.html | 2 +- guide/useApi/useIntervalFn.html | 2 +- guide/useApi/useLoop.html | 2 +- guide/useApi/useMousePos.html | 2 +- guide/useApi/useMousePressed.html | 2 +- hashmap.json | 2 +- index.html | 2 +- 56 files changed, 62 insertions(+), 62 deletions(-) rename assets/{guide_plugins_communicate.md.3c28a7e7.js => guide_plugins_communicate.md.d5bc4b0c.js} (99%) rename assets/{guide_plugins_communicate.md.3c28a7e7.lean.js => guide_plugins_communicate.md.d5bc4b0c.lean.js} (100%) rename assets/{guide_plugins_worker.md.e3bae651.js => guide_plugins_worker.md.14cf7c1d.js} (97%) rename assets/{guide_plugins_worker.md.e3bae651.lean.js => guide_plugins_worker.md.14cf7c1d.lean.js} (83%) diff --git a/404.html b/404.html index 64248e2..ab7d4b5 100644 --- a/404.html +++ b/404.html @@ -14,7 +14,7 @@
fcanvas

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home

Released under the MIT License.

Copyright © 2019-present Tachibana Shin

- + diff --git a/assets/guide_plugins_communicate.md.3c28a7e7.js b/assets/guide_plugins_communicate.md.d5bc4b0c.js similarity index 99% rename from assets/guide_plugins_communicate.md.3c28a7e7.js rename to assets/guide_plugins_communicate.md.d5bc4b0c.js index 95a83c8..84d7383 100644 --- a/assets/guide_plugins_communicate.md.3c28a7e7.js +++ b/assets/guide_plugins_communicate.md.d5bc4b0c.js @@ -15,7 +15,7 @@ import{_ as s,o as n,c as a,b as l}from"./app.665db464.js";const A=JSON.parse('{ // call function import { put } from "@fcanvas/communicate" console.log(await put(port2, "hello world", "Shin")) // "run done" -

With WebWorker

ts
import { listen } from "@fcanvas/communicate"
+

With WebWorker

ts
import { listen } from "@fcanvas/communicate"
 
 listen(self, "hello world", (name: string) => {
   console.log(\`run: hello world '\${name}'\`)
@@ -28,7 +28,7 @@ import{_ as s,o as n,c as a,b as l}from"./app.665db464.js";const A=JSON.parse('{
 const worker = new Worker()
 
 console.log(await put(worker, "hello world", "Shin")) // "run done"
-

2-way use

You can use both ways set listen to Worker or Threat

ts
import { listen } from "@fcanvas/communicate"
+

2-way use

You can use both ways set listen to Worker or Threat

ts
import { listen } from "@fcanvas/communicate"
 
 listen(self, "hello world", async (name: string) => {
   console.log(\`run: hello world '\${name}'\`)
diff --git a/assets/guide_plugins_communicate.md.3c28a7e7.lean.js b/assets/guide_plugins_communicate.md.d5bc4b0c.lean.js
similarity index 100%
rename from assets/guide_plugins_communicate.md.3c28a7e7.lean.js
rename to assets/guide_plugins_communicate.md.d5bc4b0c.lean.js
diff --git a/assets/guide_plugins_worker.md.e3bae651.js b/assets/guide_plugins_worker.md.14cf7c1d.js
similarity index 97%
rename from assets/guide_plugins_worker.md.e3bae651.js
rename to assets/guide_plugins_worker.md.14cf7c1d.js
index ff3d278..03a6500 100644
--- a/assets/guide_plugins_worker.md.e3bae651.js
+++ b/assets/guide_plugins_worker.md.14cf7c1d.js
@@ -1,5 +1,5 @@
 import{_ as s,o as n,c as a,b as l}from"./app.665db464.js";const F=JSON.parse('{"title":"@fcanvas/worker","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugins/worker.md","lastUpdated":1678633799000}'),p={name:"guide/plugins/worker.md"},o=l(`
@fcanvas/worker 
The plugin provides support for using fCanvas in WebWorker
This plugin needs to be integrated into both mainstream and Worker
If you just need simple operation and don't need to redraw many times directly or manipulate events you don't need this plugin
View source code at: https://github.com/fcanvas/fcanvas
Install 
bash
pnpm add fcanvas @fcanvas/worker
-
Usage 
To use the power of WebWorker with fCanvas you first need to create a Stage on the main thread to receive signals from Worker:
then you just create another Stage in Worker and send it to thread and use fCanvas as usual:
ts
import Worker from "./worker?worker"
+
Usage 
To use the power of WebWorker with fCanvas you first need to create a Stage on the main thread to receive signals from Worker:
then you just create another Stage in Worker and send it to thread and use fCanvas as usual:
ts
import Worker from "./worker?worker"
 
 import { portToWorker } from "@fcanvas/worker"
 
@@ -36,4 +36,4 @@ import{_ as s,o as n,c as a,b as l}from"./app.665db464.js";const F=JSON.parse('{
 layer.add(circle)
 
 portToThread(stage)
-
`,11),e=[o];function r(t,c,D,y,i,A){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{F as __pageData,d as default};
+
`,11),e=[o];function r(c,t,D,y,A,i){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{F as __pageData,d as default}; diff --git a/assets/guide_plugins_worker.md.e3bae651.lean.js b/assets/guide_plugins_worker.md.14cf7c1d.lean.js similarity index 83% rename from assets/guide_plugins_worker.md.e3bae651.lean.js rename to assets/guide_plugins_worker.md.14cf7c1d.lean.js index 0cb213f..3d35a6f 100644 --- a/assets/guide_plugins_worker.md.e3bae651.lean.js +++ b/assets/guide_plugins_worker.md.14cf7c1d.lean.js @@ -1 +1 @@ -import{_ as s,o as n,c as a,b as l}from"./app.665db464.js";const F=JSON.parse('{"title":"@fcanvas/worker","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugins/worker.md","lastUpdated":1678633799000}'),p={name:"guide/plugins/worker.md"},o=l("",11),e=[o];function r(t,c,D,y,i,A){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{F as __pageData,d as default}; +import{_ as s,o as n,c as a,b as l}from"./app.665db464.js";const F=JSON.parse('{"title":"@fcanvas/worker","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugins/worker.md","lastUpdated":1678633799000}'),p={name:"guide/plugins/worker.md"},o=l("",11),e=[o];function r(c,t,D,y,A,i){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{F as __pageData,d as default}; diff --git a/guide/essentials/Group.html b/guide/essentials/Group.html index acb05d3..91db837 100644 --- a/guide/essentials/Group.html +++ b/guide/essentials/Group.html @@ -35,7 +35,7 @@ group )

now the position of the displayed circle will be { 100 + 10; 100 + 10 }

The landmark value of offset Shape is calculated from the position of Group

- + diff --git a/guide/essentials/Layer.html b/guide/essentials/Layer.html index 47dc1b8..a914e4a 100644 --- a/guide/essentials/Layer.html +++ b/guide/essentials/Layer.html @@ -52,7 +52,7 @@

it is equivalent to

ts
stage.add(layer)

destroy()

Destroy Layer

ts
destroy(): void
- + diff --git a/guide/essentials/Shape.html b/guide/essentials/Shape.html index 45c5b08..8cac454 100644 --- a/guide/essentials/Shape.html +++ b/guide/essentials/Shape.html @@ -57,7 +57,7 @@

it is equivalent to

ts
layer.add(layer)

destroy()

Destroy Shape

ts
destroy(): void
- + diff --git a/guide/essentials/Stage.html b/guide/essentials/Stage.html index e86904b..327515b 100644 --- a/guide/essentials/Stage.html +++ b/guide/essentials/Stage.html @@ -48,7 +48,7 @@

add(node)

Add Layer to Stage

ts
add(node: Layer): ChildNodes

destroy()

Destroy Stage

ts
destroy(): void
- + diff --git a/guide/essentials/computed.html b/guide/essentials/computed.html index cea82b2..756c9ae 100644 --- a/guide/essentials/computed.html +++ b/guide/essentials/computed.html @@ -27,7 +27,7 @@ x.value = 50 - + diff --git a/guide/essentials/events.html b/guide/essentials/events.html index 36121a7..7f58b50 100644 --- a/guide/essentials/events.html +++ b/guide/essentials/events.html @@ -33,7 +33,7 @@ circle.$.fill = "blue" }) - + diff --git a/guide/essentials/reactivity-fundamentals.html b/guide/essentials/reactivity-fundamentals.html index 348e4b3..75102eb 100644 --- a/guide/essentials/reactivity-fundamentals.html +++ b/guide/essentials/reactivity-fundamentals.html @@ -27,7 +27,7 @@ x.value = 50 - + diff --git a/guide/essentials/watchers.html b/guide/essentials/watchers.html index 670507e..f175e2b 100644 --- a/guide/essentials/watchers.html +++ b/guide/essentials/watchers.html @@ -32,7 +32,7 @@ circle.$.x++ // emit console.log("x changed") - + diff --git a/guide/extra-topics/performance.html b/guide/extra-topics/performance.html index 8c57078..19381a9 100644 --- a/guide/extra-topics/performance.html +++ b/guide/extra-topics/performance.html @@ -45,7 +45,7 @@ canvas.style.width = `${rect.width}px` canvas.style.height = `${rect.height}px`

Using Group

If you have a lot of elements that don't change often you can use Group to group them together

Reference: Usage Group

Using WebWorker

It's a bit odd that WebWorker is here because in general using WebWorker doesn't bring any performance improvement it just keeps your application from getting blocked by heavy tasks.

Reference: Usage @fcanvas/worker

- + diff --git a/guide/functions/nextTick.html b/guide/functions/nextTick.html index ec7a903..65490a0 100644 --- a/guide/functions/nextTick.html +++ b/guide/functions/nextTick.html @@ -44,7 +44,7 @@ console.log(toCanvas(layer).toDataURL()) // image url - + diff --git a/guide/functions/other-utils.html b/guide/functions/other-utils.html index 06efe3d..a60dca4 100644 --- a/guide/functions/other-utils.html +++ b/guide/functions/other-utils.html @@ -129,7 +129,7 @@ console.log(state.foo) // => undefined console.log(state.bar) // => 'foo' - + diff --git a/guide/functions/reactivity-watch-api.html b/guide/functions/reactivity-watch-api.html index 4a6e338..8d7157d 100644 --- a/guide/functions/reactivity-watch-api.html +++ b/guide/functions/reactivity-watch-api.html @@ -133,7 +133,7 @@ data.value = await response }) - + diff --git a/guide/introduction.html b/guide/introduction.html index e799839..90c2722 100644 --- a/guide/introduction.html +++ b/guide/introduction.html @@ -19,7 +19,7 @@

Or just use script tag:

html
<script src="https://unpkg.com/fcanvas@1/dist/index.browser.min.global.js"></script>

Or use module EMCA:

js
import { Stage } from "https://unpkg.com/fcanvas@1"
- + diff --git a/guide/overview.html b/guide/overview.html index 90ecf55..e0ea9ba 100644 --- a/guide/overview.html +++ b/guide/overview.html @@ -131,7 +131,7 @@ circle.$.y = 101 // re-render 1

However you can also force a Layer so that it re-render regardless of the change:

ts
layer.markChange()

Split Layer

As framework supports several <canvas> elements you can put objects at your discretion. For example your application consists from complex background and several moving shapes. You can use one layer for background and another one for shapes. While updating shapes you don't need to update background canvas.

You can find all available performance tips here: Performance

- + diff --git a/guide/plugins/animate.html b/guide/plugins/animate.html index 8a9a9db..d03f9e1 100644 --- a/guide/plugins/animate.html +++ b/guide/plugins/animate.html @@ -20,7 +20,7 @@ import { installAnimate } from "@fcanvas/animate" installAnimate(Stage)

and now the Animate class is ready to import and the .to() method is up and running

- + diff --git a/guide/plugins/communicate.html b/guide/plugins/communicate.html index d9276f0..df7bf95 100644 --- a/guide/plugins/communicate.html +++ b/guide/plugins/communicate.html @@ -8,7 +8,7 @@ - + @@ -32,7 +32,7 @@ // call function import { put } from "@fcanvas/communicate" console.log(await put(port2, "hello world", "Shin")) // "run done" -

With WebWorker

ts
import { listen } from "@fcanvas/communicate"
+

With WebWorker

ts
import { listen } from "@fcanvas/communicate"
 
 listen(self, "hello world", (name: string) => {
   console.log(`run: hello world '${name}'`)
@@ -45,7 +45,7 @@
 const worker = new Worker()
 
 console.log(await put(worker, "hello world", "Shin")) // "run done"
-

2-way use

You can use both ways set listen to Worker or Threat

ts
import { listen } from "@fcanvas/communicate"
+

2-way use

You can use both ways set listen to Worker or Threat

ts
import { listen } from "@fcanvas/communicate"
 
 listen(self, "hello world", async (name: string) => {
   console.log(`run: hello world '${name}'`)
@@ -122,7 +122,7 @@
 put<Connect>(self, "hello") // ❗ error
 put<Connect>(self, "hellx", "Shin") // ❗ error

MIT - (c) 2022-now Tachibana Shin (橘しん)

- + diff --git a/guide/plugins/node.html b/guide/plugins/node.html index 1b3287e..fe3043e 100644 --- a/guide/plugins/node.html +++ b/guide/plugins/node.html @@ -23,7 +23,7 @@ layer.to

except Stage you can use anything from fcanvas through @fcanvas/node

- + diff --git a/guide/plugins/tile.html b/guide/plugins/tile.html index 0529bae..bd4b301 100644 --- a/guide/plugins/tile.html +++ b/guide/plugins/tile.html @@ -21,7 +21,7 @@ installAnimate(Stage)

and now the Animate class is ready to import and the .to() method is up and running

- + diff --git a/guide/plugins/worker.html b/guide/plugins/worker.html index 008c03b..ac962c6 100644 --- a/guide/plugins/worker.html +++ b/guide/plugins/worker.html @@ -8,7 +8,7 @@ - + @@ -16,7 +16,7 @@
fcanvas

Appearance

Return to top
On this page

@fcanvas/worker

The plugin provides support for using fCanvas in WebWorker

This plugin needs to be integrated into both mainstream and Worker

If you just need simple operation and don't need to redraw many times directly or manipulate events you don't need this plugin

View source code at: https://github.com/fcanvas/fcanvas

Install

bash
pnpm add fcanvas @fcanvas/worker
-

Usage

To use the power of WebWorker with fCanvas you first need to create a Stage on the main thread to receive signals from Worker:

then you just create another Stage in Worker and send it to thread and use fCanvas as usual:

ts
import Worker from "./worker?worker"
+

Usage

To use the power of WebWorker with fCanvas you first need to create a Stage on the main thread to receive signals from Worker:

then you just create another Stage in Worker and send it to thread and use fCanvas as usual:

ts
import Worker from "./worker?worker"
 
 import { portToWorker } from "@fcanvas/worker"
 
@@ -54,7 +54,7 @@
 
 portToThread(stage)

Released under the MIT License.

Copyright © 2019-present Tachibana Shin

- + diff --git a/guide/reusability/composables.html b/guide/reusability/composables.html index 6f62db0..cb24149 100644 --- a/guide/reusability/composables.html +++ b/guide/reusability/composables.html @@ -16,7 +16,7 @@
fcanvas

Appearance

Return to top
On this page

Released under the MIT License.

Copyright © 2019-present Tachibana Shin

- + diff --git a/guide/shapes/Arc.html b/guide/shapes/Arc.html index efcee06..8b5f6d9 100644 --- a/guide/shapes/Arc.html +++ b/guide/shapes/Arc.html @@ -31,7 +31,7 @@ strokeWidth: 4 }).addTo(layer) - + diff --git a/guide/shapes/Arrow.html b/guide/shapes/Arrow.html index 686dbce..f3967ac 100644 --- a/guide/shapes/Arrow.html +++ b/guide/shapes/Arrow.html @@ -31,7 +31,7 @@ strokeWidth: 4 }).addTo(layer) - + diff --git a/guide/shapes/Circle.html b/guide/shapes/Circle.html index 8f604b9..6ecbe7a 100644 --- a/guide/shapes/Circle.html +++ b/guide/shapes/Circle.html @@ -29,7 +29,7 @@ strokeWidth: 4 }).addTo(layer) - + diff --git a/guide/shapes/Custom.html b/guide/shapes/Custom.html index 29edd06..c19b665 100644 --- a/guide/shapes/Custom.html +++ b/guide/shapes/Custom.html @@ -31,7 +31,7 @@ } })

Shape is a wrapper around native 2d canvas context that have the same properties and methods with some additional API.

We can use the renderer to access the HTML5 Canvas context, and to use special methods like this.fillStrokeScene() which automatically handles filling, stroking, and applying shadows.

There are two properties that can be used for drawing custom shapes: sceneFunc.

sceneFunc should be used to define visual appearance of a shape. fcanvas will use sceneFunc for drawing its hit graph for events detecting. So in many cases you just need to define sceneFunc only

Some best practices for writing sceneFunc:

  1. Make it as optimal, as possible because that function can be called many times per second. It is not ok to create images (document.createElement('image') or new window.Image()) or other large objects here.

  2. The function should not have any side effects like moving shapes, attaching events or changing state of your app.

  3. If you want to apply complex styles to the canvas manually or draw images.

  4. Do not apply position and scaling in sceneFunc manually. fcanvas can handle it automatically if you set that properties into shape instance directly. Example: this.$.x = 10.

  5. If possible do not apply styles in sceneFunc manually. Just draw a shape with some paths. this.fillStrokeScene() function at the and will do all styling work.

For a full list of attributes and methods, check out the Shape documentation

- + diff --git a/guide/shapes/Ellipse.html b/guide/shapes/Ellipse.html index b296b80..78e59af 100644 --- a/guide/shapes/Ellipse.html +++ b/guide/shapes/Ellipse.html @@ -30,7 +30,7 @@ strokeWidth: 4 }).addTo(layer) - + diff --git a/guide/shapes/Image.html b/guide/shapes/Image.html index 3e0d61a..eee5945 100644 --- a/guide/shapes/Image.html +++ b/guide/shapes/Image.html @@ -28,7 +28,7 @@ image: await loadImage("https://shin.is-a.dev/favicon.ico") }).addTo(layer) - + diff --git a/guide/shapes/ImageRepeat.html b/guide/shapes/ImageRepeat.html index 8ef1901..6f969bc 100644 --- a/guide/shapes/ImageRepeat.html +++ b/guide/shapes/ImageRepeat.html @@ -29,7 +29,7 @@ scrollTop: 20 }).addTo(layer) - + diff --git a/guide/shapes/Label.html b/guide/shapes/Label.html index 859cd2f..2a4c026 100644 --- a/guide/shapes/Label.html +++ b/guide/shapes/Label.html @@ -103,7 +103,7 @@ layer.add(labelLeft) layer.add(simpleLabel) - + diff --git a/guide/shapes/Line-Blob.html b/guide/shapes/Line-Blob.html index 3dc6d93..828b5a2 100644 --- a/guide/shapes/Line-Blob.html +++ b/guide/shapes/Line-Blob.html @@ -29,7 +29,7 @@ tension: 0.3 }).addTo(layer) - + diff --git a/guide/shapes/Line-Polygon.html b/guide/shapes/Line-Polygon.html index 442ec93..84c88f5 100644 --- a/guide/shapes/Line-Polygon.html +++ b/guide/shapes/Line-Polygon.html @@ -28,7 +28,7 @@ closed: true }).addTo(layer) - + diff --git a/guide/shapes/Line-Spline.html b/guide/shapes/Line-Spline.html index f13b41a..622340b 100644 --- a/guide/shapes/Line-Spline.html +++ b/guide/shapes/Line-Spline.html @@ -58,7 +58,7 @@ tension: 0.7 }).addTo(layer) - + diff --git a/guide/shapes/Line.html b/guide/shapes/Line.html index fcff05a..ab77857 100644 --- a/guide/shapes/Line.html +++ b/guide/shapes/Line.html @@ -54,7 +54,7 @@ dash: [29, 20, 0.001, 20] }).addTo(layer) - + diff --git a/guide/shapes/Path.html b/guide/shapes/Path.html index 4ebbc27..58f9dc6 100644 --- a/guide/shapes/Path.html +++ b/guide/shapes/Path.html @@ -29,7 +29,7 @@ scaleY: 0.5 }).addTo(layer) - + diff --git a/guide/shapes/Rect.html b/guide/shapes/Rect.html index 236d266..602aa2e 100644 --- a/guide/shapes/Rect.html +++ b/guide/shapes/Rect.html @@ -47,7 +47,7 @@ cornerRadius: [0, 10, 20, 30] }).addTo(layer) - + diff --git a/guide/shapes/RegularPolygon.html b/guide/shapes/RegularPolygon.html index ff57f15..1b9e0f2 100644 --- a/guide/shapes/RegularPolygon.html +++ b/guide/shapes/RegularPolygon.html @@ -30,7 +30,7 @@ strokeWidth: 4 }).addTo(layer) - + diff --git a/guide/shapes/Ring.html b/guide/shapes/Ring.html index 01addfa..ff516f5 100644 --- a/guide/shapes/Ring.html +++ b/guide/shapes/Ring.html @@ -30,7 +30,7 @@ strokeWidth: 4 }).addTo(layer) - + diff --git a/guide/shapes/Sprite.html b/guide/shapes/Sprite.html index de199c8..4de75a3 100644 --- a/guide/shapes/Sprite.html +++ b/guide/shapes/Sprite.html @@ -64,7 +64,7 @@ }) }) - + diff --git a/guide/shapes/Star.html b/guide/shapes/Star.html index fb71050..0ba543b 100644 --- a/guide/shapes/Star.html +++ b/guide/shapes/Star.html @@ -31,7 +31,7 @@ strokeWidth: 4 }).addTo(layer) - + diff --git a/guide/shapes/Tag.html b/guide/shapes/Tag.html index dcf1a80..b64ed00 100644 --- a/guide/shapes/Tag.html +++ b/guide/shapes/Tag.html @@ -16,7 +16,7 @@
fcanvas

Appearance

Return to top
On this page

Tag Shape

TIP

This class is a descendant of Shape it also inherits all the options that Shape provides.

TIP

This component also supports a return function

To create an arc shape with fcanvas, we can instantiate a Tag object.

In addition, this shape also provides a few other parameters:

Optional Options

NameTypeDefaultDescription
pointerDirectionMayBeRef<"up" | "down" | "left" | "right" | "none">"none"The display direction of the arrow of Tag. If equal "none" not display arrow
pointerWidthMayBeRef<number>width of arrow
pointerHeightMayBeRef<number>width of height
cornerRadiusMayBeRef<number | [number, number] | [number, number, number, number>0This property is same as border-radius in css
widthMayBeRef<number>autowidth length
heightMayBeRef<number>autoheight length

This component is a wrapper for Text in Label

Released under the MIT License.

Copyright © 2019-present Tachibana Shin

- + diff --git a/guide/shapes/Text.html b/guide/shapes/Text.html index ac4af35..3cdc260 100644 --- a/guide/shapes/Text.html +++ b/guide/shapes/Text.html @@ -63,7 +63,7 @@ layer.add(rect) layer.add(complexText) - + diff --git a/guide/shapes/TextPath.html b/guide/shapes/TextPath.html index 389607a..966724b 100644 --- a/guide/shapes/TextPath.html +++ b/guide/shapes/TextPath.html @@ -30,7 +30,7 @@ data: "M10,10 C0,0 10,150 100,100 S300,150 5.0.300" }).addTo(layer) - + diff --git a/guide/shapes/Wedge.html b/guide/shapes/Wedge.html index d5fdc0e..9d4386d 100644 --- a/guide/shapes/Wedge.html +++ b/guide/shapes/Wedge.html @@ -31,7 +31,7 @@ rotation: -120 }).addTo(layer) - + diff --git a/guide/styling/Fill.html b/guide/styling/Fill.html index ad60d0d..db235ed 100644 --- a/guide/styling/Fill.html +++ b/guide/styling/Fill.html @@ -145,7 +145,7 @@ layer.add(linearGradPentagon) layer.add(radialGradPentagon) - + diff --git a/guide/styling/filter.html b/guide/styling/filter.html index 12be278..dcdcd11 100644 --- a/guide/styling/filter.html +++ b/guide/styling/filter.html @@ -85,7 +85,7 @@ filter: opacity(50%); }

saturate

Saturates the image, with 0% being completely unsaturated, 100% leaving the image unchanged, and values of over 100% increasing saturation.

sepia

Converts the image to sepia, with a value of 100% making the image completely sepia and 0% making no change.

- + diff --git a/guide/styling/transform.html b/guide/styling/transform.html index f4b0784..e3789d6 100644 --- a/guide/styling/transform.html +++ b/guide/styling/transform.html @@ -25,7 +25,7 @@ skewY?: number }

If you are familiar with CSS 3 you will find them familiar

Yes indeed x, y are alias of the translate in CSS function. and likewise I will explain them below

offset and x, y

You will set them by setting offset it allows to shift the element by how many pixels

scale

Magnify it how many times along the x and y axes.

It is the alias of scale in CSS

rotation

How many degrees of rotation this unit is in degress

skewX and skewY

Skew it by how many pixels in the x and y axes.

It is the alias of skewX in CSS and skewY in CSS

- + diff --git a/guide/useApi/useIntervalFn.html b/guide/useApi/useIntervalFn.html index 82d89bc..f272b90 100644 --- a/guide/useApi/useIntervalFn.html +++ b/guide/useApi/useIntervalFn.html @@ -47,7 +47,7 @@ options?: UseIntervalFnOptions ): Pausable - + diff --git a/guide/useApi/useLoop.html b/guide/useApi/useLoop.html index 3370ab3..1595028 100644 --- a/guide/useApi/useLoop.html +++ b/guide/useApi/useLoop.html @@ -28,7 +28,7 @@ export function useLoop(fn: (stop: () => void) => void): Looper - + diff --git a/guide/useApi/useMousePos.html b/guide/useApi/useMousePos.html index bd115fc..15c9fe4 100644 --- a/guide/useApi/useMousePos.html +++ b/guide/useApi/useMousePos.html @@ -30,7 +30,7 @@ instance: ElAddEventListener = getCurrentShape() ): MousePos - + diff --git a/guide/useApi/useMousePressed.html b/guide/useApi/useMousePressed.html index 739ad6d..bc7ae51 100644 --- a/guide/useApi/useMousePressed.html +++ b/guide/useApi/useMousePressed.html @@ -22,7 +22,7 @@ instance: ElAddEventListener = getCurrentShape() ): Ref<boolean> - + diff --git a/hashmap.json b/hashmap.json index 5722b5b..4623266 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"guide_essentials_group.md":"a5e23e96","guide_essentials_stage.md":"ed83787a","guide_essentials_shape.md":"bea11980","guide_essentials_computed.md":"022e87ef","guide_extra-topics_performance.md":"5136cb8e","guide_essentials_events.md":"1fd312c3","guide_essentials_reactivity-fundamentals.md":"12f36208","guide_functions_nexttick.md":"56656378","guide_essentials_layer.md":"f2bf5117","guide_functions_other-utils.md":"919327b2","guide_essentials_watchers.md":"4e58dfed","guide_functions_reactivity-watch-api.md":"c29adb8b","guide_plugins_node.md":"a2027c26","guide_introduction.md":"2c927479","guide_overview.md":"c5007747","guide_plugins_animate.md":"bf05b634","guide_plugins_communicate.md":"3c28a7e7","guide_styling_filter.md":"f8c2c20f","guide_shapes_imagerepeat.md":"5995accc","guide_shapes_line-blob.md":"bddee67b","guide_shapes_label.md":"1c3d9b8e","guide_shapes_line-polygon.md":"6a91f49f","guide_shapes_regularpolygon.md":"f763d64b","guide_shapes_path.md":"1534f600","guide_shapes_ring.md":"8b2e0179","guide_shapes_sprite.md":"f7a9c0d1","guide_shapes_star.md":"018f7556","guide_shapes_tag.md":"789ebfde","guide_plugins_tile.md":"055f6e2c","guide_shapes_text.md":"129f9e21","guide_shapes_textpath.md":"df274dd8","guide_styling_transform.md":"b625b74b","guide_useapi_useintervalfn.md":"c4cc000b","guide_useapi_useloop.md":"b867b4ca","guide_useapi_usemousepos.md":"d7de46f4","guide_useapi_usemousepressed.md":"ba825fd8","guide_shapes_wedge.md":"5e156b32","guide_shapes_arrow.md":"28972994","index.md":"1612484d","guide_reusability_composables.md":"da4800e1","guide_shapes_arc.md":"6f46c950","guide_shapes_custom.md":"6ff3bb2e","guide_shapes_circle.md":"1bd3ce37","guide_plugins_worker.md":"e3bae651","guide_shapes_ellipse.md":"1200c044","guide_shapes_image.md":"19069f8c","guide_shapes_line-spline.md":"c14bc338","guide_shapes_rect.md":"c903d325","guide_styling_fill.md":"1b21c88e","guide_shapes_line.md":"d42483d5"} +{"guide_essentials_layer.md":"f2bf5117","guide_shapes_custom.md":"6ff3bb2e","guide_introduction.md":"2c927479","guide_essentials_watchers.md":"4e58dfed","guide_plugins_animate.md":"bf05b634","guide_plugins_worker.md":"14cf7c1d","guide_essentials_group.md":"a5e23e96","guide_shapes_arc.md":"6f46c950","guide_shapes_arrow.md":"28972994","guide_shapes_circle.md":"1bd3ce37","guide_overview.md":"c5007747","guide_plugins_communicate.md":"d5bc4b0c","guide_reusability_composables.md":"da4800e1","guide_functions_nexttick.md":"56656378","guide_functions_other-utils.md":"919327b2","guide_shapes_ellipse.md":"1200c044","guide_shapes_image.md":"19069f8c","guide_shapes_imagerepeat.md":"5995accc","guide_shapes_line-blob.md":"bddee67b","guide_shapes_path.md":"1534f600","guide_shapes_rect.md":"c903d325","guide_shapes_regularpolygon.md":"f763d64b","guide_shapes_ring.md":"8b2e0179","guide_shapes_sprite.md":"f7a9c0d1","guide_shapes_star.md":"018f7556","guide_shapes_tag.md":"789ebfde","guide_styling_fill.md":"1b21c88e","guide_styling_filter.md":"f8c2c20f","guide_styling_transform.md":"b625b74b","guide_useapi_useintervalfn.md":"c4cc000b","guide_essentials_shape.md":"bea11980","guide_useapi_useloop.md":"b867b4ca","guide_useapi_usemousepos.md":"d7de46f4","guide_useapi_usemousepressed.md":"ba825fd8","index.md":"1612484d","guide_essentials_computed.md":"022e87ef","guide_shapes_wedge.md":"5e156b32","guide_extra-topics_performance.md":"5136cb8e","guide_shapes_line-spline.md":"c14bc338","guide_plugins_node.md":"a2027c26","guide_plugins_tile.md":"055f6e2c","guide_shapes_text.md":"129f9e21","guide_essentials_stage.md":"ed83787a","guide_essentials_reactivity-fundamentals.md":"12f36208","guide_shapes_label.md":"1c3d9b8e","guide_shapes_line-polygon.md":"6a91f49f","guide_shapes_textpath.md":"df274dd8","guide_functions_reactivity-watch-api.md":"c29adb8b","guide_essentials_events.md":"1fd312c3","guide_shapes_line.md":"d42483d5"} diff --git a/index.html b/index.html index dd985bb..b02346f 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
fcanvas

Appearance

The Canvas 2D
JavaScript Library

A powerful 2d canvas library that allows minimal rendering and provides diverse shapes

(This document is still in development)

Get Started & Install Overview

Approachable

Built with minimal options and closer to CSS

Reactivity

The reactive power provided with `@vue/reactivity` allows this library to minimize redraws and increase performance

WebWorker

Leverage the power of WebWorker with fcanvas. @fcanvas/worker allows you to display canvas to user while drawing on WebWorker does not block main thread

Released under the MIT License.

Copyright © 2019-present Tachibana Shin

- +