Skip to content

Full Eyedropper Tool implementation based on pixel sampling #154

@Keavon

Description

@Keavon

Clicking somewhere samples the color of the pixel under the cursor and sets the primary working color to that. Left click to sample for the primary color, right click to sample for the secondary color.

Since it isn't possible to sample colors from a web page using JavaScript, the simplest approach for this is to probably use the browser's collision detection for the SVG shapes to determine which SVG element is being clicked on, then take either its fill or stroke color. However this approach breaks down for shapes with both a fill and a stroke, and shapes with a gradient or non-solid color. Further investigation is required for solutions that support those edge cases, but one possibility would be switching from rendering via the SVG element to rendering with a 2D canvas using the Path2D API for drawing SVG syntax to the canvas. Canvases can have their color sampled from.

A simpler MVP solution is to just check the color or stroke property of the shape clicked in the viewport, similar to #178. That MVP is filed under #303 and was merged in #300.

Metadata

Metadata

Assignees

No one assigned

    Labels

    WebInvolves web programming (TypeScript, Svelte, CSS)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions