diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index e7f70f65..a15453db 100644 --- a/src/containers/paint-editor.jsx +++ b/src/containers/paint-editor.jsx @@ -187,9 +187,12 @@ class PaintEditor extends React.Component { startEyeDroppingLoop () { this.eyeDropper = new EyeDropperTool( this.canvas, - paper.project.view.size.width, - paper.project.view.size.height, - paper.project.view.pixelRatio + paper.project.view.bounds.width, + paper.project.view.bounds.height, + paper.project.view.pixelRatio, + paper.view.zoom, + paper.project.view.bounds.x, + paper.project.view.bounds.y ); this.eyeDropper.activate(); diff --git a/src/helper/tools/eye-dropper.js b/src/helper/tools/eye-dropper.js index 7071152a..636a8e75 100644 --- a/src/helper/tools/eye-dropper.js +++ b/src/helper/tools/eye-dropper.js @@ -3,7 +3,7 @@ import paper from '@scratch/paper'; const LOUPE_RADIUS = 20; class EyeDropperTool extends paper.Tool { - constructor (canvas, width, height, pixelRatio) { + constructor (canvas, width, height, pixelRatio, zoom, offsetX, offsetY) { super(); this.onMouseDown = this.handleMouseDown; @@ -11,15 +11,18 @@ class EyeDropperTool extends paper.Tool { this.canvas = canvas; this.pixelRatio = pixelRatio; - this.width = width * this.pixelRatio; - this.height = height * this.pixelRatio; + this.zoom = zoom; + 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.colorString = ''; } handleMouseMove (event) { // Set the pickX/Y for the color picker loop to pick up - this.pickX = event.point.x * this.pixelRatio; - this.pickY = event.point.y * this.pixelRatio; + this.pickX = (event.point.x - this.offsetX) * this.zoom * this.pixelRatio; + this.pickY = (event.point.y - this.offsetY) * this.zoom * this.pixelRatio; // check if the x/y are outside of the canvas this.hideLoupe = this.pickX > this.width ||