mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
Merge pull request #1002 from moonrailgun/moonrailgun/export-box
export type box and others type complement
This commit is contained in:
commit
229032bd15
@ -369,7 +369,17 @@ export class Context {
|
|||||||
* @method
|
* @method
|
||||||
* @name Konva.Context#drawImage
|
* @name Konva.Context#drawImage
|
||||||
*/
|
*/
|
||||||
drawImage(a0, a1, a2, a3?, a4?, a5?, a6?, a7?, a8?) {
|
drawImage(
|
||||||
|
a0: CanvasImageSource,
|
||||||
|
a1: number,
|
||||||
|
a2: number,
|
||||||
|
a3?: number,
|
||||||
|
a4?: number,
|
||||||
|
a5?: number,
|
||||||
|
a6?: number,
|
||||||
|
a7?: number,
|
||||||
|
a8?: number
|
||||||
|
) {
|
||||||
var a = arguments,
|
var a = arguments,
|
||||||
_context = this._context;
|
_context = this._context;
|
||||||
|
|
||||||
@ -386,7 +396,16 @@ export class Context {
|
|||||||
* @method
|
* @method
|
||||||
* @name Konva.Context#ellipse
|
* @name Konva.Context#ellipse
|
||||||
*/
|
*/
|
||||||
ellipse(a0, a1, a2, a3, a4, a5, a6, a7) {
|
ellipse(
|
||||||
|
a0: number,
|
||||||
|
a1: number,
|
||||||
|
a2: number,
|
||||||
|
a3: number,
|
||||||
|
a4: number,
|
||||||
|
a5: number,
|
||||||
|
a6: number,
|
||||||
|
a7?: boolean
|
||||||
|
) {
|
||||||
this._context.ellipse(a0, a1, a2, a3, a4, a5, a6, a7);
|
this._context.ellipse(a0, a1, a2, a3, a4, a5, a6, a7);
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
|
37
src/Layer.ts
37
src/Layer.ts
@ -326,9 +326,7 @@ export class Layer extends Container<Group | Shape> {
|
|||||||
* // or if you interested in shape parent:
|
* // or if you interested in shape parent:
|
||||||
* var group = layer.getIntersection({x: 50, y: 50}, 'Group');
|
* var group = layer.getIntersection({x: 50, y: 50}, 'Group');
|
||||||
*/
|
*/
|
||||||
getIntersection(pos: Vector2d, selector?: string) {
|
getIntersection(pos: Vector2d, selector?: string): Node | null {
|
||||||
var obj, i, intersectionOffset, shape;
|
|
||||||
|
|
||||||
if (!this.isListening() || !this.isVisible()) {
|
if (!this.isListening() || !this.isVisible()) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -337,13 +335,13 @@ export class Layer extends Container<Group | Shape> {
|
|||||||
var spiralSearchDistance = 1;
|
var spiralSearchDistance = 1;
|
||||||
var continueSearch = false;
|
var continueSearch = false;
|
||||||
while (true) {
|
while (true) {
|
||||||
for (i = 0; i < INTERSECTION_OFFSETS_LEN; i++) {
|
for (let i = 0; i < INTERSECTION_OFFSETS_LEN; i++) {
|
||||||
intersectionOffset = INTERSECTION_OFFSETS[i];
|
const intersectionOffset = INTERSECTION_OFFSETS[i];
|
||||||
obj = this._getIntersection({
|
const obj = this._getIntersection({
|
||||||
x: pos.x + intersectionOffset.x * spiralSearchDistance,
|
x: pos.x + intersectionOffset.x * spiralSearchDistance,
|
||||||
y: pos.y + intersectionOffset.y * spiralSearchDistance,
|
y: pos.y + intersectionOffset.y * spiralSearchDistance,
|
||||||
});
|
});
|
||||||
shape = obj.shape;
|
const shape = obj.shape;
|
||||||
if (shape && selector) {
|
if (shape && selector) {
|
||||||
return shape.findAncestor(selector, true);
|
return shape.findAncestor(selector, true);
|
||||||
} else if (shape) {
|
} else if (shape) {
|
||||||
@ -365,21 +363,20 @@ export class Layer extends Container<Group | Shape> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
_getIntersection(pos) {
|
_getIntersection(pos: Vector2d): { shape?: Shape; antialiased?: boolean } {
|
||||||
var ratio = this.hitCanvas.pixelRatio;
|
const ratio = this.hitCanvas.pixelRatio;
|
||||||
var p = this.hitCanvas.context.getImageData(
|
const p = this.hitCanvas.context.getImageData(
|
||||||
Math.round(pos.x * ratio),
|
Math.round(pos.x * ratio),
|
||||||
Math.round(pos.y * ratio),
|
Math.round(pos.y * ratio),
|
||||||
1,
|
1,
|
||||||
1
|
1
|
||||||
).data,
|
).data;
|
||||||
p3 = p[3],
|
const p3 = p[3];
|
||||||
colorKey,
|
|
||||||
shape;
|
|
||||||
// fully opaque pixel
|
// fully opaque pixel
|
||||||
if (p3 === 255) {
|
if (p3 === 255) {
|
||||||
colorKey = Util._rgbToHex(p[0], p[1], p[2]);
|
const colorKey = Util._rgbToHex(p[0], p[1], p[2]);
|
||||||
shape = shapes[HASH + colorKey];
|
const shape = shapes[HASH + colorKey];
|
||||||
if (shape) {
|
if (shape) {
|
||||||
return {
|
return {
|
||||||
shape: shape,
|
shape: shape,
|
||||||
|
15
src/Shape.ts
15
src/Shape.ts
@ -21,6 +21,9 @@ export type ShapeConfigHandler<TTarget> = {
|
|||||||
bivarianceHack(ctx: Context, shape: TTarget): void;
|
bivarianceHack(ctx: Context, shape: TTarget): void;
|
||||||
}['bivarianceHack'];
|
}['bivarianceHack'];
|
||||||
|
|
||||||
|
export type LineJoin = 'round' | 'bevel' | 'miter';
|
||||||
|
export type LineCap = 'butt' | 'round' | 'square';
|
||||||
|
|
||||||
export interface ShapeConfig extends NodeConfig {
|
export interface ShapeConfig extends NodeConfig {
|
||||||
fill?: string;
|
fill?: string;
|
||||||
fillPatternImage?: HTMLImageElement;
|
fillPatternImage?: HTMLImageElement;
|
||||||
@ -58,8 +61,8 @@ export interface ShapeConfig extends NodeConfig {
|
|||||||
strokeScaleEnabled?: boolean;
|
strokeScaleEnabled?: boolean;
|
||||||
strokeHitEnabled?: boolean;
|
strokeHitEnabled?: boolean;
|
||||||
strokeEnabled?: boolean;
|
strokeEnabled?: boolean;
|
||||||
lineJoin?: string;
|
lineJoin?: LineJoin;
|
||||||
lineCap?: string;
|
lineCap?: LineCap;
|
||||||
sceneFunc?: (con: Context, shape: Shape) => void;
|
sceneFunc?: (con: Context, shape: Shape) => void;
|
||||||
hitFunc?: (con: Context, shape: Shape) => void;
|
hitFunc?: (con: Context, shape: Shape) => void;
|
||||||
shadowColor?: string;
|
shadowColor?: string;
|
||||||
@ -98,7 +101,7 @@ function getDummyContext(): CanvasRenderingContext2D {
|
|||||||
return dummyContext;
|
return dummyContext;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const shapes = {};
|
export const shapes: { [key: string]: Shape } = {};
|
||||||
|
|
||||||
// TODO: idea - use only "remove" (or destroy method)
|
// TODO: idea - use only "remove" (or destroy method)
|
||||||
// how? on add, check that every inner shape has reference in konva store with color
|
// how? on add, check that every inner shape has reference in konva store with color
|
||||||
@ -179,7 +182,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
|
|||||||
constructor(config?: Config) {
|
constructor(config?: Config) {
|
||||||
super(config);
|
super(config);
|
||||||
// set colorKey
|
// set colorKey
|
||||||
var key;
|
let key: string;
|
||||||
|
|
||||||
while (true) {
|
while (true) {
|
||||||
key = Util.getRandomColor();
|
key = Util.getRandomColor();
|
||||||
@ -795,8 +798,8 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
|
|||||||
fillPatternY: GetSet<number, this>;
|
fillPatternY: GetSet<number, this>;
|
||||||
fillPriority: GetSet<string, this>;
|
fillPriority: GetSet<string, this>;
|
||||||
hitFunc: GetSet<ShapeConfigHandler<this>, this>;
|
hitFunc: GetSet<ShapeConfigHandler<this>, this>;
|
||||||
lineCap: GetSet<string, this>;
|
lineCap: GetSet<LineCap, this>;
|
||||||
lineJoin: GetSet<string, this>;
|
lineJoin: GetSet<LineJoin, this>;
|
||||||
perfectDrawEnabled: GetSet<boolean, this>;
|
perfectDrawEnabled: GetSet<boolean, this>;
|
||||||
sceneFunc: GetSet<ShapeConfigHandler<this>, this>;
|
sceneFunc: GetSet<ShapeConfigHandler<this>, this>;
|
||||||
shadowColor: GetSet<string, this>;
|
shadowColor: GetSet<string, this>;
|
||||||
|
@ -360,7 +360,7 @@ export class Stage extends Container<Layer> {
|
|||||||
layer.draw();
|
layer.draw();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
add(layer) {
|
add(layer: Layer) {
|
||||||
if (arguments.length > 1) {
|
if (arguments.length > 1) {
|
||||||
for (var i = 0; i < arguments.length; i++) {
|
for (var i = 0; i < arguments.length; i++) {
|
||||||
this.add(arguments[i]);
|
this.add(arguments[i]);
|
||||||
|
@ -5,6 +5,7 @@ import { getNumberValidator } from '../Validators';
|
|||||||
import { _registerNode } from '../Global';
|
import { _registerNode } from '../Global';
|
||||||
|
|
||||||
import { GetSet, IRect } from '../types';
|
import { GetSet, IRect } from '../types';
|
||||||
|
import { Context } from '../Context';
|
||||||
|
|
||||||
export interface ImageConfig extends ShapeConfig {
|
export interface ImageConfig extends ShapeConfig {
|
||||||
image: CanvasImageSource | undefined;
|
image: CanvasImageSource | undefined;
|
||||||
@ -38,17 +39,15 @@ export class Image extends Shape<ImageConfig> {
|
|||||||
_useBufferCanvas() {
|
_useBufferCanvas() {
|
||||||
return super._useBufferCanvas(true);
|
return super._useBufferCanvas(true);
|
||||||
}
|
}
|
||||||
_sceneFunc(context) {
|
_sceneFunc(context: Context) {
|
||||||
var width = this.getWidth(),
|
const width = this.getWidth();
|
||||||
height = this.getHeight(),
|
const height = this.getHeight();
|
||||||
image = this.attrs.image,
|
const image = this.attrs.image;
|
||||||
cropWidth,
|
let params;
|
||||||
cropHeight,
|
|
||||||
params;
|
|
||||||
|
|
||||||
if (image) {
|
if (image) {
|
||||||
cropWidth = this.attrs.cropWidth;
|
const cropWidth = this.attrs.cropWidth;
|
||||||
cropHeight = this.attrs.cropHeight;
|
const cropHeight = this.attrs.cropHeight;
|
||||||
if (cropWidth && cropHeight) {
|
if (cropWidth && cropHeight) {
|
||||||
params = [
|
params = [
|
||||||
image,
|
image,
|
||||||
|
@ -11,7 +11,7 @@ import { _registerNode } from '../Global';
|
|||||||
|
|
||||||
import { GetSet, IRect, Vector2d } from '../types';
|
import { GetSet, IRect, Vector2d } from '../types';
|
||||||
|
|
||||||
interface Box extends IRect {
|
export interface Box extends IRect {
|
||||||
rotation: number;
|
rotation: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1208,7 +1208,7 @@ export class Transformer extends Group {
|
|||||||
keepRatio: GetSet<boolean, this>;
|
keepRatio: GetSet<boolean, this>;
|
||||||
centeredScaling: GetSet<boolean, this>;
|
centeredScaling: GetSet<boolean, this>;
|
||||||
ignoreStroke: GetSet<boolean, this>;
|
ignoreStroke: GetSet<boolean, this>;
|
||||||
boundBoxFunc: GetSet<(oldBox: IRect, newBox: IRect) => IRect, this>;
|
boundBoxFunc: GetSet<(oldBox: Box, newBox: Box) => Box, this>;
|
||||||
shouldOverdrawWholeArea: GetSet<boolean, this>;
|
shouldOverdrawWholeArea: GetSet<boolean, this>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@ export enum KonvaNodeEvent {
|
|||||||
dbltap = 'dbltap',
|
dbltap = 'dbltap',
|
||||||
dragstart = 'dragstart',
|
dragstart = 'dragstart',
|
||||||
dragmove = 'dragmove',
|
dragmove = 'dragmove',
|
||||||
dragend = 'dragend'
|
dragend = 'dragend',
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface RGB {
|
export interface RGB {
|
||||||
|
Loading…
Reference in New Issue
Block a user