Flash 形状中的“CurveTo”和“LineTo”

Question

我正在尝试使用 Direct2D 显示一些旧的 SWF 文件。

\n

我找到了swfmill ，它是一个显示“W”的简单 SWF（在此处找到）

\n

\n

生成 XML 代码，其中一部分如下：

\n

          <ShapeSetup x="-214" y="470" fillStyle1="1"/>\n          <LineTo x="-20" y="0"/>\n          <CurveTo x1="-35" y1="-74" x2="-45" y2="-109"/>\n          <CurveTo x1="-46" y1="-109" x2="-109" y2="-244"/>\n          <CurveTo x1="-110" y1="-244" x2="-32" y2="-50"/>\n          <CurveTo x1="-33" y1="-50" x2="-27" y2="-18"/>\n          <CurveTo x1="-27" y1="-19" x2="-21" y2="-3"/>\n          <CurveTo x1="-21" y1="-1" x2="0" y2="-9"/>\n          <CurveTo x1="0" y1="-10" x2="53" y2="0"/>\n          <LineTo x="304" y="0"/>\n          <CurveTo x1="43" y1="0" x2="0" y2="10"/>\n          <CurveTo x1="0" y1="10" x2="-24" y2="0"/>\n          <CurveTo x1="-100" y1="6" x2="0" y2="70"/>\n          <CurveTo x1="0" y1="16" x2="8" y2="27"/>\n          <CurveTo x1="8" y1="27" x2="100" y2="229"/>\n          <CurveTo x1="99" y1="229" x2="59" y2="120"/>\n          <CurveTo x1="22" y1="-56" x2="73" y2="-216"/>\n          <CurveTo x1="72" y1="-215" x2="14" y2="-56"/>\n          <CurveTo x1="-53" y1="-131" x2="-24" y2="-21"/>\n          <CurveTo x1="-24" y1="-22" x2="-41" y2="-7"/>\n          <CurveTo x1="-29" y1="-1" x2="0" y2="-9"/>\n          <CurveTo x1="0" y1="-10" x2="52" y2="0"/>\n          <LineTo x="305" y="0"/>\n          <CurveTo x1="28" y1="0" x2="7" y2="2"/>\n          <CurveTo x1="8" y1="2" x2="0" y2="6"/>\n          <CurveTo x1="0" y1="6" x2="-40" y2="4"/>\n          <CurveTo x1="-84" y1="13" x2="0" y2="68"/>\n          <CurveTo x1="0" y1="106" x2="234" y2="531"/>\n          <CurveTo x1="46" y1="-116" x2="44" y2="-123"/>\n          <LineTo x="80" y="-220"/>\n          <CurveTo x1="35" y1="-97" x2="4" y2="-25"/>\n          <CurveTo x1="5" y1="-25" x2="0" y2="-21"/>\n          <CurveTo x1="0" y1="-89" x2="-85" y2="-2"/>\n          <CurveTo x1="-19" y1="0" x2="0" y2="-10"/>\n          <CurveTo x1="0" y1="-6" x2="6" y2="-2"/>\n          <CurveTo x1="6" y1="-2" x2="28" y2="0"/>\n          <LineTo x="165" y="0"/>\n          <CurveTo x1="74" y1="0" x2="10" y2="2"/>\n          <CurveTo x1="11" y1="1" x2="0" y2="9"/>\n          <CurveTo x1="0" y1="8" x2="-16" y2="0"/>\n          <CurveTo x1="-74" y1="6" x2="-43" y2="83"/>\n          <CurveTo x1="-42" y1="83" x2="-154" y2="449"/>\n          <CurveTo x1="-81" y1="235" x2="-27" y2="64"/>\n          <LineTo x="-21" y="0"/>\n          <CurveTo x1="-58" y1="-160" x2="-55" y2="-132"/>\n          <CurveTo x1="-54" y1="-132" x2="-100" y2="-257"/>\n          <LineTo x="-229" y="681"/>\n          <ShapeSetup/>\n

\n

我不知道如何解释这个形状。

\n

我尝试过的：
\n我尝试使用ID2D1PathGeometry和BeginFigure（对于 ShapeSetup），

\n

\n
• AddLine（对于每个LineTo），
\n
• AddQuadraticBezier（对于每个CurveTo）但结果是这样的：
\n

\n

\n

我意识到我必须组合一些几何形状，但我不确定如何组合。我在这里找到的规范说：

\n

\n

FillStyle0和FillStyle1
Adob​​e Flash 创作工具支持每个边缘两种填充样式，边缘的每一侧各有一种：FillStyle0和\n FillStyle1。

\n对于不\xe2\x80\x99t 自相交或重叠的形状，\n应使用FillStyle0 。

\n对于重叠形状，情况更为复杂。例如，如果形状由两个重叠的正方形组成，并且仅定义了FillStyle0

，则 Flash Player 将在路径重叠的位置呈现 \xe2\x80\x98hole\xe2\x80\x99。可以使用FillStyle1填充该区域。在这种情况下，规则是对于任何有向向量，FillStyle0是向量左侧的颜色，FillStyle1是向量右侧的颜色

\n

\n

有人知道应该如何绘制该形状吗？

\n

Answer 1

也许，坐标都是相对的。所以你需要增量计算位置。

例如，

<ShapeSetup x="-214" y="470" fillStyle1="1"/>
<LineTo x="-20" y="0"/>
<CurveTo x1="-35" y1="-74" x2="-45" y2="-109"/>
:

将被翻译成

pSink->BeginFigure(D2D1::Point2F(-214, 470), D2D1_FIGURE_BEGIN_FILLED);

pSink->AddLine(D2D1::Point2F(-234, 470)); // -214, 470 + (-20, 0)

D2D1_QUADRATIC_BEZIER_SEGMENT seg = {
    D2D1::Point2F(-269, 396), // -234, 470 + (-35,-74)
    D2D1::Point2F(-314, 287)  // -269, 396 + (-45,-109)
};
pSink->AddQuadraticBezier(&seg);
:

附录

以 XAML 或 SVG 路径数据形式对其进行测试，

M -214,470 
l -20, 0 
q -35,-74 -80,-183 
q -46,-109 -155,-353 
q -110,-244 -142,-294 
q -33,-50 -60,-68 
q -27,-19 -48,-22 
q -21,-1 -21,-10 
q 0,-10 53,-10 
l 304, 0 
q 43,0 43,10 
q 0,10 -24,10 
q -100,6 -100,76 
q 0,16 8,43 
q 8,27 108,256 
q 99,229 158,349 
q 22,-56 95,-272 
q 72,-215 86,-271 
q -53,-131 -77,-152 
q -24,-22 -65,-29 
q -29,-1 -29,-10 
q 0,-10 52,-10 
l 305, 0 
q 28,0 35,2 
q 8,2 8,8 
q 0,6 -40,10 
q -84,13 -84,81 
q 0,106 234,637 
q 46,-116 90,-239 
l 80, -220 
q 35,-97 39,-122 
q 5,-25 5,-46 
q 0,-89 -85,-91 
q -19,0 -19,-10 
q 0,-6 6,-8 
q 6,-2 34,-2 
l 165, 0 
q 74,0 84,2 
q 11,1 11,10 
q 0,8 -16,8 
q -74,6 -117,89 
q -42,83 -196,532 
q -81,235 -108,299 
l -21, 0 
q -58,-160 -113,-292 
q -54,-132 -154,-389 
l -229, 681 
Z

肯定得到了W。