InPlace Crop : Stage 1

Simulate the users behaviour of increasing the crop window and translating the element within the crop window

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<input type="range" max="300" min="0" value="0" id="size" />
<input type="range" max="300" min="0" value="0" id="move" />

CSS

body {
  background-color: #404040;
}

JavaScript

const imageSrc = "https://s3.ap-south-1.amazonaws.com/republic-invideo/dog_1603357231987.png";

const app = new PIXI.Application({
  width: 600,
  height: 400,
  transparent: true
});

document.body.appendChild(app.view);

const maskWidth = 0;
const maskHeight = 0;

const container = new PIXI.Container();
container.width = app.screen.width;
container.height = app.screen.height;

const sprite = PIXI.Sprite.fromImage(imageSrc);
sprite.width = app.screen.width;
sprite.height = app.screen.height;

container.addChild(sprite);

app.stage.addChild(container);

const mask = new PIXI.Graphics();
mask.beginFill(0xff00ff);

const x = app.screen.width / 2;
const y = app.screen.height / 2;
mask.drawRect(10, 10, 100, 100);
mask.endFill();
app.stage.addChild(mask);
container.mask = mask;

let tempWidth = 0;
let tempHeight = 0;

document.getElementById("size").oninput = event => {
  const offset = parseInt(event.target.value);
  tempWidth = 100 + offset;
  tempHeight = 100 + offset;
  mask.clear();
  mask.beginFill(0xff00ff);
  mask.drawRect(10, 10, tempWidth, tempHeight);
  mask.endFill();
  mask.width = tempWidth;
  mask.height = tempHeight;
};

document.getElementById("move").oninput = event => {
  const offset = -parseInt(event.target.value);
  container.x = offset;
};