查找将Sketch形状路径点（json格式）转换为svg路径的模式或公式
[英]Finding a pattern or formula to convert Sketch shape path points(json format) to svg path
问题描述
我试图找到一个模式将Sketch形状点（json格式）转换为svg路径，因为我们知道草图文件只是zip文件，解压缩你将获得json文件。 这里是样本json代码
{
"_class": "triangle",
"do_objectID": "BE50CDBE-491C-4402-98EA-71E9C7B9F61B",
"booleanOperation": -1,
"frame": {
"_class": "rect",
"do_objectID": "0B39EF6D-9AD4-409B-85FA-D09B2B8A0692",
"constrainProportions": false,
"height": 56.86153846153846,
"width": 66,
"x": 0,
"y": 0
},
"isFixedToViewport": false,
"isFlippedHorizontal": false,
"isFlippedVertical": false,
"isLocked": false,
"isVisible": true,
"layerListExpandedType": 1,
"name": "Triangle",
"nameIsFixed": false,
"resizingConstraint": 63,
"resizingType": 0,
"rotation": 0,
"shouldBreakMaskChain": false,
"userInfo": {
"com.animaapp.stc-sketch-plugin": {
"kModelPropertiesKey": {}
}
},
"clippingMaskMode": 0,
"hasClippingMask": false,
"edited": false,
"isClosed": true,
"pointRadiusBehaviour": 1,
"points": [
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.49999999999999944, 0}",
"curveMode": 1,
"curveTo": "{0.49999999999999944, 0}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.49999999999999944, 0}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.99999999999999889, 1}",
"curveMode": 1,
"curveTo": "{0.99999999999999889, 1}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.99999999999999889, 1}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0, 1}",
"curveMode": 1,
"curveTo": "{0, 1}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0, 1}"
}
],
"isEquilateral": false
}
这为Triangle提供了svg路径代码
<polygon id="Triangle" points="33 0 66 56.8615385 0 56.8615385"></polygon>
因为我的理解getting 33(x value)完成如下，因为上面的帧原点是0,0 (frame->x, frame->y)我认为得到它的实际位置是采取frame->width （因为宽度对应于x轴），这是66 times first x point in points, which is 0.49999999999999944 ，得到（ 32.99999999 approx 33 ）， first y point取frame->height(56.86153846153846 times the first y point in points which is 0)结果第一点是33 0
第二点相同，得到x取frame->width(66)乘以second x point in points which is 0.99999999得到66 ，与其corresponding y (56.86153846153846 times 1) which is 56.86153846153846 ，得到第二个点为66 56.86153846153846与第三点相同..
如果frame-> x和frame-> y的数字大于0，则开始混淆
考虑一下..
{
"_class": "triangle",
"do_objectID": "BB3FB5DE-F0A8-4AAD-8009-14F908023F19",
"booleanOperation": -1,
"frame": {
"_class": "rect",
"do_objectID": "316A9A7C-D0BF-4D71-BC65-1A0301846F20",
"constrainProportions": true,
"height": 32.49230769230769,
"width": 37.56923076923076,
"x": 14.21538461538461,
"y": 22.33846153846153
},
"isFixedToViewport": false,
"isFlippedHorizontal": false,
"isFlippedVertical": false,
"isLocked": false,
"isVisible": true,
"layerListExpandedType": 1,
"name": "Triangle",
"nameIsFixed": false,
"resizingConstraint": 63,
"resizingType": 0,
"rotation": -180,
"shouldBreakMaskChain": false,
"userInfo": {
"com.animaapp.stc-sketch-plugin": {
"kModelPropertiesKey": {
"constraints": {
"scaleFactor": 1,
"model_version": 0.1,
"aspectRatio": {
"multiplier": 37.56923,
"enabled": 1,
"model_version": 0.1,
"modelID": "constraint_dd3b6146-988c-411d-94e1-cb5ec2a60bc8",
"model_class": "ADModelConstraint",
"constant": 32.49231
},
"modelID": "viewConstraints_7f13ceae-6706-4965-b3af-3cde627fd97c",
"model_class": "ADModelViewConstraints",
"automatic": 1
}
}
}
},
"clippingMaskMode": 0,
"hasClippingMask": false,
"edited": false,
"isClosed": true,
"pointRadiusBehaviour": 1,
"points": [
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.4999999999999995, 0}",
"curveMode": 1,
"curveTo": "{0.4999999999999995, 0}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.4999999999999995, 0}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.999999999999999, 1.0000000000000009}",
"curveMode": 1,
"curveTo": "{0.999999999999999, 1.0000000000000009}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.999999999999999, 1.0000000000000009}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0, 1.0000000000000009}",
"curveMode": 1,
"curveTo": "{0, 1.0000000000000009}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0, 1.0000000000000009}"
}
],
"isEquilateral": false
}
它对应的svg路径是
<polygon id="Triangle" transform="translate(33.000000, 38.584615) rotate(180.000000) translate(-33.000000, -38.584615) " points="33 22.3384615 51.7846154 54.8307692 14.2153846 54.8307692"></polygon>
现在，如果我按上述方法进行数学计算，我不会得到points="33 22.3384615 51.7846154 54.8307692 14.2153846 54.8307692"如上面的svg代码所示。 这只适用于三角形，如果是像facebook图标这样的自定义形状路径，则会让人感到困惑！ 示例草图徽标，
其对应的Sketch json代码如下。
{
"_class": "group",
"do_objectID": "4AA67C64-14B8-433F-8569-9BF7BAEC2914",
"booleanOperation": -1,
"frame": {
"_class": "rect",
"do_objectID": "1FB80667-369B-4F79-9D8E-76ABD9065B12",
"constrainProportions": true,
"height": 50,
"width": 50,
"x": 0,
"y": 0
},
"isFixedToViewport": false,
"isFlippedHorizontal": false,
"isFlippedVertical": false,
"isLocked": false,
"isVisible": true,
"layerListExpandedType": 0,
"name": "Facebook",
"nameIsFixed": true,
"resizingConstraint": 63,
"resizingType": 0,
"rotation": 0,
"shouldBreakMaskChain": false,
"userInfo": {
"com.animaapp.stc-sketch-plugin": {
"kModelPropertiesKey": {
"constraints": {
"scaleFactor": 1,
"model_version": 0.1,
"aspectRatio": {
"constant": 50,
"enabled": 1,
"multiplier": 50,
"modelID": "constraint_c03c7307-1fe6-4ded-9d49-e35c2e25c117",
"model_class": "ADModelConstraint",
"model_version": 0.1
},
"modelID": "viewConstraints_b34c9514-3166-464d-a3dd-f968c4f6144b",
"model_class": "ADModelViewConstraints",
"automatic": 1
}
}
}
},
"clippingMaskMode": 0,
"hasClippingMask": false,
"hasClickThrough": false,
"layers": [
{
"_class": "oval",
"do_objectID": "DA55B46C-1069-46DC-AAD6-78DCC03F4B3C",
"booleanOperation": -1,
"frame": {
"_class": "rect",
"do_objectID": "58627B0B-C1B7-4C33-BF5C-2B0F6F0DBC8E",
"constrainProportions": true,
"height": 50,
"width": 50,
"x": 0,
"y": 0
},
"isFixedToViewport": false,
"isFlippedHorizontal": false,
"isFlippedVertical": false,
"isLocked": false,
"isVisible": true,
"layerListExpandedType": 0,
"name": "Oval",
"nameIsFixed": false,
"resizingConstraint": 63,
"resizingType": 0,
"rotation": 0,
"shouldBreakMaskChain": false,
"userInfo": {
"com.animaapp.stc-sketch-plugin": {
"kModelPropertiesKey": {
"constraints": {
"scaleFactor": 1,
"model_version": 0.1,
"aspectRatio": {
"constant": 32,
"enabled": 1,
"multiplier": 32,
"modelID": "constraint_5868769e-cc0b-4eec-a4af-d965ce1b6520",
"model_class": "ADModelConstraint",
"model_version": 0.1
},
"modelID": "viewConstraints_9d4aa04f-2445-427e-9182-b1ce723cefd2",
"model_class": "ADModelViewConstraints",
"automatic": 1
}
}
}
},
"clippingMaskMode": 0,
"hasClippingMask": false,
"edited": false,
"isClosed": true,
"pointRadiusBehaviour": 1,
"points": [
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.77614237490000004, 1}",
"curveMode": 2,
"curveTo": "{0.22385762510000001, 1}",
"hasCurveFrom": true,
"hasCurveTo": true,
"point": "{0.5, 1}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{1, 0.22385762510000001}",
"curveMode": 2,
"curveTo": "{1, 0.77614237490000004}",
"hasCurveFrom": true,
"hasCurveTo": true,
"point": "{1, 0.5}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.22385762510000001, 0}",
"curveMode": 2,
"curveTo": "{0.77614237490000004, 0}",
"hasCurveFrom": true,
"hasCurveTo": true,
"point": "{0.5, 0}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0, 0.77614237490000004}",
"curveMode": 2,
"curveTo": "{0, 0.22385762510000001}",
"hasCurveFrom": true,
"hasCurveTo": true,
"point": "{0, 0.5}"
}
]
},
{
"_class": "shapePath",
"do_objectID": "C96926E4-56B4-4816-A68B-22789ACF9811",
"booleanOperation": -1,
"frame": {
"_class": "rect",
"do_objectID": "33C190C2-C868-48CC-B5A5-E033A65A5DC5",
"constrainProportions": false,
"height": 30,
"width": 14,
"x": 17,
"y": 10
},
"isFixedToViewport": false,
"isFlippedHorizontal": false,
"isFlippedVertical": false,
"isLocked": false,
"isVisible": true,
"layerListExpandedType": 1,
"name": "facebook [#176]",
"nameIsFixed": false,
"resizingConstraint": 63,
"resizingType": 0,
"rotation": 0,
"shouldBreakMaskChain": false,
"userInfo": {
"com.animaapp.stc-sketch-plugin": {
"kModelPropertiesKey": {}
}
},
"clippingMaskMode": 0,
"hasClippingMask": false,
"edited": true,
"isClosed": true,
"pointRadiusBehaviour": 0,
"points": [
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.68212824010914053, 1}",
"curveMode": 1,
"curveTo": "{0.68212824010914053, 1}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.68212824010914053, 1}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.68212824010914053, 0.55000000000000004}",
"curveMode": 1,
"curveTo": "{0.68212824010914053, 0.55000000000000004}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.68212824010914053, 0.55000000000000004}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.95536932371857075, 0.55000000000000004}",
"curveMode": 1,
"curveTo": "{0.95536932371857075, 0.55000000000000004}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.95536932371857075, 0.55000000000000004}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{1, 0.34999999999999998}",
"curveMode": 1,
"curveTo": "{1, 0.34999999999999998}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{1, 0.34999999999999998}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.68212824010914053, 0.34999999999999998}",
"curveMode": 1,
"curveTo": "{0.68212824010914053, 0.34999999999999998}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.68212824010914053, 0.34999999999999998}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.68212824010914053, 0.20109999999999956}",
"curveMode": 4,
"curveTo": "{0.68212824010914053, 0.2525999999999996}",
"hasCurveFrom": true,
"hasCurveTo": false,
"point": "{0.68212824010914053, 0.2525999999999996}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.82868836484116337, 0.14999999999999999}",
"curveMode": 4,
"curveTo": "{0.68475930617813163, 0.14999999999999999}",
"hasCurveFrom": false,
"hasCurveTo": true,
"point": "{0.82868836484116337, 0.14999999999999999}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.97446891444162931, 0.14999999999999999}",
"curveMode": 1,
"curveTo": "{0.97446891444162931, 0.14999999999999999}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.97446891444162931, 0.14999999999999999}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.97446891444162931, 0.0048499999999989992}",
"curveMode": 4,
"curveTo": "{0.97446891444162931, 0.0069999999999993175}",
"hasCurveFrom": true,
"hasCurveTo": false,
"point": "{0.97446891444162931, 0.0069999999999993175}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.45800038978756463, 0}",
"curveMode": 3,
"curveTo": "{0.84924965893587745, 0}",
"hasCurveFrom": true,
"hasCurveTo": true,
"point": "{0.72256870005847007, 0}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.29234067433248878, 0.23499999999999943}",
"curveMode": 4,
"curveTo": "{0.29234067433248878, 0.082849999999999119}",
"hasCurveFrom": false,
"hasCurveTo": true,
"point": "{0.29234067433248878, 0.23499999999999943}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.29234067433248878, 0.34999999999999998}",
"curveMode": 1,
"curveTo": "{0.29234067433248878, 0.34999999999999998}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.29234067433248878, 0.34999999999999998}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0, 0.34999999999999998}",
"curveMode": 1,
"curveTo": "{0, 0.34999999999999998}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0, 0.34999999999999998}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0, 0.55000000000000004}",
"curveMode": 1,
"curveTo": "{0, 0.55000000000000004}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0, 0.55000000000000004}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.29234067433248878, 0.55000000000000004}",
"curveMode": 1,
"curveTo": "{0.29234067433248878, 0.55000000000000004}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.29234067433248878, 0.55000000000000004}"
},
{
"_class": "curvePoint",
"cornerRadius": 0,
"curveFrom": "{0.29234067433248878, 1}",
"curveMode": 1,
"curveTo": "{0.29234067433248878, 1}",
"hasCurveFrom": false,
"hasCurveTo": false,
"point": "{0.29234067433248878, 1}"
}
]
}
]
}
它的svg代码是
<g id="Facebook">
<circle id="Oval" fill="#5B76AF" cx="25" cy="25" r="25"></circle>
<path d="M26.5497954,40 L26.5497954,26.5 L30.3751705,26.5 L31,20.5 L26.5497954,20.5 L26.5497954,17.578 C26.5497954,16.033 26.5866303,14.5 28.6016371,14.5 L30.6425648,14.5 L30.6425648,10.21 C30.6425648,10.1455 28.8894952,10 27.1159618,10 C23.4120055,10 21.0927694,12.4855 21.0927694,17.05 L21.0927694,20.5 L17,20.5 L17,26.5 L21.0927694,26.5 L21.0927694,40 L26.5497954,40 Z" id="facebook-[#176]" fill="#FFFFFF"></path>
</g>
我理解<circle />来自第一层，我对它没有任何问题，问题是第二层， path是f字母，因为它的草图json点被映射到<path d="M26.5497954,40 L26.5497954,26.5 L30.3751705,26.5 L31,20.5 L26.5497954,20.5 L26.5497954,17.578 C26.5497954,16.033 26.5866303,14.5 28.6016371,14.5 L30.6425648,14.5 L30.6425648,10.21 C30.6425648,10.1455 28.8894952,10 27.1159618,10 C23.4120055,10 21.0927694,12.4855 21.0927694,17.05 L21.0927694,20.5 L17,20.5 L17,26.5 L21.0927694,26.5 L21.0927694,40 L26.5497954,40 Z" id="facebook-[#176]" fill="#FFFFFF"></path>
这是我努力破解的东西..是否有一个模式将草图json点转换为svg路径，我该怎么做...
谢谢。
1 个解决方案
解决方案1
2 已采纳 2018-12-02 15:26:34
我没有完整的解决方案，但有一些好的提示：
坐标
所有图层似乎都使用局部坐标系， x和y值介于0和1之间。因此，您需要图层大小和位置来计算SVG中使用的坐标：
x svg = frame.x + x layer * frame.width
y svg = frame.y + y layer * frame.height
命令
由于Sketch系统使用与SVG不同的模型，因此命令的映射比较棘手。 主要区别在于：SVG使用命令来表示路径段（起始M除外），而Sketch使用一个尖锐或软角点列表。 为了派生命令，您需要查看两个连续点。 我们称它们为p1和p2 ：
p1.hasCurveFrom = false和p2.hasCurveTo = false ：
这代表一条直线，因此是L命令。 坐标取自p2.point 。
p1.hasCurveFrom = true和p2.hasCurveTo = true ：
这表示三次样条，因此是C命令。 三个坐标取自：
- p1.curveFrom
- p2.curveTo
- p2.point
进一步提示
该路径以M命令开始，指向第一个点的p.point 。
属性"isClosed": true显然表示已关闭的路径。 因此，命令以Z结束以关闭路径。
可能还有许多我不知道的细微之处。
如果你想实现一个完整的Sketch to SVG转换器，你还需要实现不同的形状类，而不仅仅是三角形 ， 椭圆形和shapePath ，你需要处理所有其他属性，如isFlippedHorizontal ， isFlippedVertical ， rotation ， cornerRadius ， resizingType等
SVG 路径转换为 JSON
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.