Touch move not working like demo

[developdeez]

I followed the demo of the Scale Stage Multitouch zoom. I noticed it will slightly scale before stopping. The demo works fine on my phone.

My example code is here:
https://pastebin.com/YBKqcd8N

I wasnt able to find an example using the React component

How do I make it work.

[lavrton]

How do I make it work.

Make work what? Your code? It is too large. Can you make a small demo of issues?

[developdeez]

Here's a snippet:

  <Stage
              style={{ backgroundColor: "#0e0d0dc7" }}
              width={width}
              height={window.innerHeight - 56} // here we've reduced height as topbar will take 56px top
              onClick={this.handleStageClick}
              onTouchMove={res => {
                var touch1 = res.evt.touches[0];
                var touch2 = res.evt.touches[1];
 
                if (touch1 && touch2) {
                  var dist = getDistance(
                    {
                      x: touch1.clientX,
                      y: touch1.clientY
                    },
                    {
                      x: touch2.clientX,
                      y: touch2.clientY
                    }
                  );
 
                  if (!this.lastDist) {
                    this.lastDist = dist;
                  }
 
                  var scale = (this.stageRef.scaleX() * dist) / this.lastDist;
 
                  this.stageRef.scaleX(scale);
                  this.stageRef.scaleY(scale);
                  this.stageRef.draw();
                  this.lastDist = dist;
                }
              }}
              onTouchEnd={() => {
                this.lastDist = 0;
              }}
              ref={node => {
                this.stageRef = node;
              }}
            >
              <Layer>
                <Group
                  rotation={this.state.rotation}
                  x={x_pos}
                  y={y_pos}
                  draggable
                  scaleX={this.state.scale}
                  scaleY={this.state.scale}
                  ref={node => {
                    this.groupRef = node;
                  }}
                  dragBoundFunc={pos => {
                    const rotDegrees = rotation % 360;
                    const upright =
                      rotDegrees == 0 || rotDegrees == 180 ? true : false;
 
                    const top = upright
                      ? this.state.imageHeight / 2
                      : this.state.imageWidth / 2;
                    const left = upright
                      ? this.state.imageWidth / 2
                      : this.state.imageHeight / 2;
                    const bottom = upright
                      ? window.innerHeight - 56 - this.state.imageHeight / 2
                      : window.innerHeight - 56 - this.state.imageWidth / 2; // here also we've subtract topbar height from canvas container
                    const right = upright
                      ? this.state.width - this.state.imageWidth / 2
                      : this.state.width - this.state.imageHeight / 2;
 
                    let x = pos.x;
                    let y = pos.y;
 
                    if (pos.y > bottom) {
                      y = bottom;
                    } else if (pos.y < top) {
                      y = top;
                    }
 
                    if (pos.x > right) {
                      x = right;
                    } else if (pos.x < left) {
                      x = left;
                    }
 
                    return {
                      x,
                      y
                    };
                  }}
                >
                  {this.props.imageObject && (
                    <SourceImage
                      ref={node => {
                        this.SourceImageRef = node;
                      }}
                      width={this.state.imageWidth}
                      height={this.state.imageHeight}
                      sourceImageObject={this.props.imageObject}
                    />
                  )}
                  {konvaImageList.length > 0 &&
                    konvaImageList.map((img, idx) => {
                      var x = img.x;
                      var y = img.y;
 
                      return (
                        <KonvaImage
                          src={img.src}
                          key={img.id + idx}
                          onDragStart={this.handleDragStart}
                          onTouchStart={this.handleTouchStart}
                          width={100}
                          height={100}
                          name={img.name}
                          x={x}
                          y={y}
                          rotation={img.rotation}
                        />
                      );
                    })}
                  {hideTransformer === false && (
                    <TransformerHandler selectedShapeName={selectedShapeName} />
                  )}
                </Group>
              </Layer>
            </Stage>

[developdeez]

onTouchMove seems to not work fully. It will zoom but only in bursts.
Not a smooth zoom like the demo for multi-touch zoom