从 Sketch App .sketch 文件层绘制到 html canvas

问题描述

如何在 HTML 2D 画布中使用 javascript 绘制此 Sketch 图层？层 json 位于下方。

图层形状是线。

我失败的尝试：-

我打开了 [page.json] 并获得了图层数组，我知道我必须从图层连接 MSCurvePoints 以制作形状，但是这个需要绘制贝塞尔曲线，所以我只是在 js 中做到了 [by ctx.bezierCurveto( curveFrom.x,curveFrom.y,curveto.x,curveto.y,point.x,point.y);] 但结果甚至不接近

       {
          "<class>" : "MSShapePathLayer","booleanoperation" : -1,"clippingMaskMode" : 0,"edited" : 1,"exportOptions" : {
            "<class>" : "MSExportOptions","exportFormats" : [

            ],"includedLayerIds" : [

            ],"layerOptions" : 0,"shouldTrim" : 0
          },"frame" : {
            "<class>" : "MSRect","constrainProportions" : 0,"height" : 17.37860107421875,"width" : 165.0000000000006,"x" : 193.99999999999969,"y" : 285
          },"hasClippingMask" : 0,"isClosed" : 0,"isFixedToViewport" : 0,"isFlippedHorizontal" : 0,"isFlippedVertical" : 0,"isLocked" : 0,"isVisible" : 1,"layerListExpandedType" : 0,"name" : "Line","nameIsFixed" : 0,"objectID" : "DE00313F-23F6-4F62-B54A-722732FBC4D6","poinTradiusBehavIoUr" : 1,"points" : [
            {
              "<class>" : "MSCurvePoint","cornerRadius" : 0,"curveFrom" : {
                "x" : 0,"y" : 0
              },"curveMode" : 1,"curveto" : {
                "x" : 0,"hasCurveFrom" : 0,"hasCurveto" : 0,"point" : {
                "x" : 0,"y" : 0
              }
            },{
              "<class>" : "MSCurvePoint","curveFrom" : {
                "x" : 0.99999999999999989,"y" : -2
              },"curveMode" : 2,"curveto" : {
                "x" : 0.99999999999999989,"y" : 2
              },"hasCurveFrom" : 1,"hasCurveto" : 1,"point" : {
                "x" : 0.99999999999999978,"y" : 0
              }
            }
          ],"resizingConstraint" : 63,"resizingType" : 0,"rotation" : 0,"shouldBreakMaskChain" : 0,....

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bezier canvas html sketchapp