Sketch-plugin | ImageOptim plugin for the Sketch app | Plugin library
kandi X-RAY | Sketch-plugin Summary
kandi X-RAY | Sketch-plugin Summary
A Plugin for Sketch that compresses exported images using ImageOptim.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of Sketch-plugin
Sketch-plugin Key Features
Sketch-plugin Examples and Code Snippets
Community Discussions
Trending Discussions on Sketch-plugin
QUESTION
I am trying to find a pattern to convert Sketch shape points(json format) to svg path, as we know sketch files are just zip files, unzipping you will get json files. here are sample json codes
...ANSWER
Answered 2018-Dec-02 at 15:26I don't have the full solution but a few good hints:
Coordinates
All layers seem to use a local coordinate system with x and y values between 0 and 1. So you need the layers size and position to calculate the coordinates used in SVG:
xsvg = frame.x + xlayer * frame.width
ysvg = frame.y + ylayer * frame.height
Commands
The mapping of commands is trickier as the Sketch system uses a model different from SVG. The main difference is: SVG uses commands to represent path segments (except for the starting M) while Sketch uses a list of points that are either sharp or soft corners. In order to derive the command, you need to look at two consecutive points. Let's call them p1 and p2:
p1.hasCurveFrom = false and p2.hasCurveTo = false:
That represents a straight line, thus the L command. The coordinate is taken from p2.point.
p1.hasCurveFrom = true and p2.hasCurveTo = true:
That represents a cubic spline, thus the C command. The three coordinates are taken from:
- p1.curveFrom
- p2.curveTo
- p2.point
Further hints
The path starts with an M command to p.point of the first point.
The attribute "isClosed": true
obviously indicates a closed path. Therefore, the commands end with Z
to close the path.
There are probably many more subtleties that I don't know.
If you want to implement a full Sketch to SVG converter, you will also need to implement the different shape classes and not just triangle, oval and shapePath and you will need to take care of all the other attributes like isFlippedHorizontal, isFlippedVertical, rotation, cornerRadius, resizingType etc.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Sketch-plugin
Download and open this plugin.
Double click ImageOptim.sketchplugin to install the plugin.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page