scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-24 06:22:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

accommodate zoom in eye dropper

Browse source
This commit is contained in:
Matthew Taylor 2017-12-14 12:58:25 -05:00
parent 5caf6b7157
commit 0209e65ac0
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/containers/paint-editor.jsx
View file

@ -187,9 +187,12 @@ class PaintEditor extends React.Component {
startEyeDroppingLoop () { startEyeDroppingLoop () {
this.eyeDropper = new EyeDropperTool( this.eyeDropper = new EyeDropperTool(
this.canvas, this.canvas,
paper.project.view.size.width, paper.project.view.bounds.width,
paper.project.view.size.height, paper.project.view.bounds.height,
paper.project.view.pixelRatio paper.project.view.pixelRatio,
paper.view.zoom,
paper.project.view.bounds.x,
paper.project.view.bounds.y
); );
this.eyeDropper.activate(); this.eyeDropper.activate();

13
src/helper/tools/eye-dropper.js
View file

@ -3,7 +3,7 @@ import paper from '@scratch/paper';
const LOUPE_RADIUS = 20; const LOUPE_RADIUS = 20;
class EyeDropperTool extends paper.Tool { class EyeDropperTool extends paper.Tool {
constructor (canvas, width, height, pixelRatio) { constructor (canvas, width, height, pixelRatio, zoom, offsetX, offsetY) {
super(); super();
this.onMouseDown = this.handleMouseDown; this.onMouseDown = this.handleMouseDown;
@ -11,15 +11,18 @@ class EyeDropperTool extends paper.Tool {
this.canvas = canvas; this.canvas = canvas;
this.pixelRatio = pixelRatio; this.pixelRatio = pixelRatio;
this.width = width * this.pixelRatio; this.zoom = zoom;
this.height = height * this.pixelRatio; this.offsetX = offsetX;
this.offsetY = offsetY;
this.width = width * this.zoom * this.pixelRatio;
this.height = height * this.zoom * this.pixelRatio;
this.rect = canvas.getBoundingClientRect(); this.rect = canvas.getBoundingClientRect();
this.colorString = ''; this.colorString = '';
} }
handleMouseMove (event) { handleMouseMove (event) {
// Set the pickX/Y for the color picker loop to pick up // Set the pickX/Y for the color picker loop to pick up
this.pickX = event.point.x * this.pixelRatio; this.pickX = (event.point.x - this.offsetX) * this.zoom * this.pixelRatio;
this.pickY = event.point.y * this.pixelRatio; this.pickY = (event.point.y - this.offsetY) * this.zoom * this.pixelRatio;
// check if the x/y are outside of the canvas // check if the x/y are outside of the canvas
this.hideLoupe = this.pickX > this.width || this.hideLoupe = this.pickX > this.width ||