From 2acedfadd390dc8414a875b2e530dc4c6f11da6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20Lank?= Date: Thu, 22 Apr 2021 14:09:22 +0200 Subject: [PATCH 1/3] Add captureTouchEventsEnabled to index-types --- src/index-types.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index-types.d.ts b/src/index-types.d.ts index 932d7d28..8d5866e6 100644 --- a/src/index-types.d.ts +++ b/src/index-types.d.ts @@ -32,6 +32,7 @@ declare namespace Konva { export let dragDistance: number; export let angleDeg: boolean; export let showWarnings: boolean; + export let captureTouchEventsEnabled: boolean; export let dragButtons: Array; export let hitOnDragEnabled: boolean; export const isDragging: () => boolean; From d731edf37a4ed7b97f9533e1719837e016be3a8d Mon Sep 17 00:00:00 2001 From: yurui <18507132980@163.com> Date: Thu, 29 Apr 2021 11:24:45 +0800 Subject: [PATCH 2/3] add pointerAtEnding to Arrow --- src/shapes/Arrow.ts | 42 +++++++++++++++++++++++++++++++----------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/src/shapes/Arrow.ts b/src/shapes/Arrow.ts index 44831a4e..4681150e 100644 --- a/src/shapes/Arrow.ts +++ b/src/shapes/Arrow.ts @@ -12,6 +12,7 @@ export interface ArrowConfig extends LineConfig { pointerLength?: number; pointerWidth?: number; pointerAtBeginning?: boolean; + pointerAtEnding?: boolean; } /** @@ -25,7 +26,8 @@ export interface ArrowConfig extends LineConfig { * The default is 0 * @param {Number} config.pointerLength Arrow pointer length. Default value is 10. * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10. - * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on both sides?. Default false. + * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on beginning position?. Default false. + * @param {Boolean} config.pointerAtEnding Do we need to draw pointer on ending position?. Default true. * @@shapeParams * @@nodeParams * @example @@ -64,15 +66,17 @@ export class Arrow extends Line { var length = this.pointerLength(); var width = this.pointerWidth(); - ctx.save(); - ctx.beginPath(); - ctx.translate(points[n - 2], points[n - 1]); - ctx.rotate(radians); - ctx.moveTo(0, 0); - ctx.lineTo(-length, width / 2); - ctx.lineTo(-length, -width / 2); - ctx.closePath(); - ctx.restore(); + if (this.pointerAtEnding()) { + ctx.save(); + ctx.beginPath(); + ctx.translate(points[n - 2], points[n - 1]); + ctx.rotate(radians); + ctx.moveTo(0, 0); + ctx.lineTo(-length, width / 2); + ctx.lineTo(-length, -width / 2); + ctx.closePath(); + ctx.restore(); + } if (this.pointerAtBeginning()) { ctx.save(); @@ -125,6 +129,7 @@ export class Arrow extends Line { pointerLength: GetSet; pointerWidth: GetSet; + pointerAtEnding: GetSet; pointerAtBeginning: GetSet; } @@ -177,4 +182,19 @@ Factory.addGetterSetter(Arrow, 'pointerWidth', 10, getNumberValidator()); */ Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false); -Collection.mapMethods(Arrow); +/** + * get/set pointerAtEnding + * @name Konva.Arrow#pointerAtEnding + * @method + * @param {Number} Should pointer displayed at ending of arrow. The default is true. + * @returns {Boolean} + * @example + * // get value + * var pointerAtEnding = line.pointerAtEnding(); + * + * // set value + * line.pointerAtEnding(false); + */ + +Factory.addGetterSetter(Arrow, 'pointerAtEnding', true); +Collection.mapMethods(Arrow); \ No newline at end of file From 628a8ea9cabbf29e22cc139a18556536b7fe0503 Mon Sep 17 00:00:00 2001 From: Raphael Papazikas Date: Mon, 3 May 2021 22:54:22 +0200 Subject: [PATCH 3/3] fix #1106: hit canvas pixel ratio configurable --- src/Node.ts | 19 +++++++++++++----- test/unit/Node-cache-test.js | 38 ++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 5 deletions(-) diff --git a/src/Node.ts b/src/Node.ts index 9ab0b0a0..c367f25b 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -333,6 +333,7 @@ export abstract class Node { * region for debugging purposes * @param {Number} [config.pixelRatio] change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache. * @param {Boolean} [config.imageSmoothingEnabled] control imageSmoothingEnabled property of created canvas for cache + * @param {Number} [config.hitCanvasPixelRatio] change quality (or pixel ratio) of cached hit canvas. * @returns {Konva.Node} * @example * // cache a shape with the x,y position of the bounding box at the center and @@ -368,6 +369,7 @@ export abstract class Node { offset?: number; pixelRatio?: number; imageSmoothingEnabled?: boolean; + hitCanvasPixelRatio?: number; }) { var conf = config || {}; var rect = {} as IRect; @@ -391,7 +393,8 @@ export abstract class Node { x = conf.x === undefined ? rect.x : conf.x, y = conf.y === undefined ? rect.y : conf.y, offset = conf.offset || 0, - drawBorder = conf.drawBorder || false; + drawBorder = conf.drawBorder || false, + hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1; if (!width || !height) { Util.error( @@ -417,7 +420,7 @@ export abstract class Node { height: 0, }), cachedHitCanvas = new HitCanvas({ - pixelRatio: 1, + pixelRatio: hitCanvasPixelRatio, width: width, height: height, }), @@ -427,7 +430,7 @@ export abstract class Node { cachedHitCanvas.isCache = true; cachedSceneCanvas.isCache = true; - this._cache.delete('canvas'); + this._cache.delete(CANVAS); this._filterUpToDate = false; if (conf.imageSmoothingEnabled === false) { @@ -484,7 +487,7 @@ export abstract class Node { * @returns {Boolean} */ isCached() { - return this._cache.has('canvas'); + return this._cache.has(CANVAS); } abstract drawScene(canvas?: Canvas, top?: Node): void; @@ -587,7 +590,13 @@ export abstract class Node { hitCanvas = canvasCache.hit; context.save(); context.translate(canvasCache.x, canvasCache.y); - context.drawImage(hitCanvas._canvas, 0, 0); + context.drawImage( + hitCanvas._canvas, + 0, + 0, + hitCanvas.width / hitCanvas.pixelRatio, + hitCanvas.height / hitCanvas.pixelRatio, + ); context.restore(); } _getCachedSceneCanvas() { diff --git a/test/unit/Node-cache-test.js b/test/unit/Node-cache-test.js index 6c925aff..2399bb97 100644 --- a/test/unit/Node-cache-test.js +++ b/test/unit/Node-cache-test.js @@ -1470,4 +1470,42 @@ suite('Caching', function () { }); }); }); + + test('hit from cache with custom pixelRatio', function () { + var stage = addStage(); + + var layer = new Konva.Layer(); + + var rect = new Konva.Rect({ + x: 100, + y: 50, + width: 100, + height: 100, + fill: 'green', + }); + + layer.add(rect); + stage.add(layer); + + rect.cache({ + hitCanvasPixelRatio: 0.2, + }); + layer.draw(); + + var hitCanvas = rect._cache.get("canvas").hit; + assert.equal(hitCanvas._canvas.width, rect.width() * 0.2); + assert.equal(hitCanvas._canvas.height, rect.height() * 0.2); + assert.equal(hitCanvas.pixelRatio, 0.2); + + var canvas = createCanvas(); + var context = canvas.getContext('2d'); + context.beginPath(); + context.rect(100, 50, 100, 100); + context.closePath(); + context.fillStyle = 'green'; + context.fill(); + showHit(layer); + compareLayerAndCanvas(layer, canvas, 5); + assert.equal(stage.getIntersection({ x: 150, y: 100 }), rect); + }); });