changes and docs

This commit is contained in:
Anton Lavrenov 2023-06-05 10:28:44 -05:00
parent caf161a676
commit 68d5a8b436
2 changed files with 16 additions and 3 deletions

View File

@ -3,6 +3,11 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/). This project adheres to [Semantic Versioning](http://semver.org/).
### 9.2.0 (2023-05-14)
- More controls on clipping
- `fillRule` for `Konva.Shape`
### 9.1.0 (2023-05-14) ### 9.1.0 (2023-05-14)
- New `anchorStyleFunc` for `Konva.Transformer` to customize anchor style - New `anchorStyleFunc` for `Konva.Transformer` to customize anchor style

View File

@ -7,7 +7,10 @@ import { Shape } from './Shape';
import { HitCanvas, SceneCanvas } from './Canvas'; import { HitCanvas, SceneCanvas } from './Canvas';
import { SceneContext } from './Context'; import { SceneContext } from './Context';
export type ClipFuncOutput = void | [Path2D | CanvasFillRule] | [Path2D, CanvasFillRule] export type ClipFuncOutput =
| void
| [Path2D | CanvasFillRule]
| [Path2D, CanvasFillRule];
export interface ContainerConfig extends NodeConfig { export interface ContainerConfig extends NodeConfig {
clearBeforeDraw?: boolean; clearBeforeDraw?: boolean;
clipFunc?: (ctx: SceneContext) => ClipFuncOutput; clipFunc?: (ctx: SceneContext) => ClipFuncOutput;
@ -521,7 +524,10 @@ export abstract class Container<
// there was "this" instead of "Container<ChildType>", // there was "this" instead of "Container<ChildType>",
// but it breaks react-konva types: https://github.com/konvajs/react-konva/issues/390 // but it breaks react-konva types: https://github.com/konvajs/react-konva/issues/390
clipFunc: GetSet< clipFunc: GetSet<
(ctx: CanvasRenderingContext2D, shape: Container<ChildType>) => ClipFuncOutput, (
ctx: CanvasRenderingContext2D,
shape: Container<ChildType>
) => ClipFuncOutput,
this this
>; >;
} }
@ -637,10 +643,12 @@ Factory.addGetterSetter(Container, 'clipFunc');
* // get clip function * // get clip function
* var clipFunction = container.clipFunc(); * var clipFunction = container.clipFunc();
* *
* // set clip height * // set clip function
* container.clipFunc(function(ctx) { * container.clipFunc(function(ctx) {
* ctx.rect(0, 0, 100, 100); * ctx.rect(0, 0, 100, 100);
* });
* *
* container.clipFunc(function(ctx) {
* // optionally return a clip Path2D and clip-rule or just the clip-rule * // optionally return a clip Path2D and clip-rule or just the clip-rule
* return [new Path2D('M0 0v50h50Z'), 'evenodd'] * return [new Path2D('M0 0v50h50Z'), 'evenodd']
* }); * });