查找將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.