主页 / user-265406

UModeL's questions

Martin Hope
UModeL
Asked: 2021-11-19 14:39:11 +0800 CST
  • 4

我做了这个形状：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <path d="M 50 30 l 20 30 l -40 0 z M 45 45 h 30 v 30 h -30 z M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z " fill="#ff0" stroke="#000" stroke-width="1" fill-rule="evenodd"></path>
</svg>

接下来，希望用不同的颜色绘制人物的元素。然后我遇到了一个问题：图形是由一个绘制的<path>- 因此，对于填充，您只能设置一种颜色，这对所有元素都是通用的。

我将整个形状分成单独的形状，并给每个形状都指定了所需的颜色：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <path fill="#f00a" stroke="#000" stroke-width="1" d="M 50 30 l 20 30 l -40 0 z "></path>
  <path fill="#080a" stroke="#000" stroke-width="1" d="M 45 45 h 30 v 30 h -30 z "></path>
  <path fill="#00fa" stroke="#000" stroke-width="1" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z "></path>
</svg>

现在，在形状相交的地方，填充并没有被移除，颜色只是简单地相互叠加。

我尝试使用过滤器<feFlood>并<feComposite>与 结合使用<feMerge>，但我对参数完全感到困惑......

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <defs>
    <path id="T" fill="#f00a" stroke="#000" stroke-width="1" d="M 50 30 l 20 30 l -40 0 z "></path>
    <path id="R" fill="#080a" stroke="#000" stroke-width="1" d="M 45 45 h 30 v 30 h -30 z "></path>
    <path id="C" fill="#00fa" stroke="#000" stroke-width="1" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z "></path>
    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#fff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
      <feMerge>
        <feMergeNode in="flood"/>
        <feMergeNode in="comp"/>
      </feMerge>
    </filter>
  </defs>   
  <use xlink:href="#T" filter="url(#xorFlood)" />
  <use xlink:href="#R" filter="url(#xorFlood)" />
  <use xlink:href="#C" filter="url(#xorFlood)" />
</svg>

研究专业资源，其中所有内容都描述得很干巴巴，并试图调整其他人的例子以适应他们的任务，并没有增加清晰度和理解力。我想了解一个具体的例子。（形状的透明度是可选的，但可取。）

svg
Martin Hope
UModeL
Asked: 2020-07-27 07:04:22 +0800 CST
  • 6

对于 Adob​​e Photoshop 中的脚本，有一个带有选择和控件的对话框：

var dlg = new Window('dialog{text: "Выбор размеров", bounds: [' + fBounds(150,200,370,150) + '], \
            panel_s: Panel{text: "Стандартные:", bounds: [' + fBounds(5,5,203,85) + '], \
                checkbox_16:  Checkbox{bounds: [' + fBounds(5,13,55,14) + '],   text: "16 x 16"},   \
                checkbox_24:  Checkbox{bounds: [' + fBounds(5,33,55,14) + '],   text: "24 x 24"},   \
                checkbox_32:  Checkbox{bounds: [' + fBounds(5,53,55,14) + '],   text: "32 x 32"},   \
                checkbox_48:  Checkbox{bounds: [' + fBounds(67,13,55,14) + '],  text: "48 x 48"},   \
                checkbox_64:  Checkbox{bounds: [' + fBounds(67,33,55,14) + '],  text: "64 x 64"},   \
                checkbox_96:  Checkbox{bounds: [' + fBounds(67,53,55,14) + '],  text: "96 x 96"},   \
                checkbox_128: Checkbox{bounds: [' + fBounds(129,13,65,14) + '], text: "128 x 128"}, \
                checkbox_256: Checkbox{bounds: [' + fBounds(129,33,65,14) + '], text: "256 x 256"}, \
                checkbox_512: Checkbox{bounds: [' + fBounds(129,53,65,14) + '], text: "512 x 512"}  \
            }, \
            panel_o: Panel{text: "Другие:", bounds: [' + fBounds(206,5,69,64) + '],\
                checkbox_19: Checkbox{bounds: [' + fBounds(5,13,55,14) + '], text: "19 x 19"}, \
                checkbox_38: Checkbox{bounds: [' + fBounds(5,33,55,14) + '], text: "38 x 38"}  \
            }, \
            panel_u: Panel{text: "Свои:", bounds: [' + fBounds(273,5,92,85) + '],\
                checkbox_u1: Checkbox{bounds:   [' + fBounds(5,13,14,14) + ']},                                                 \
                static_u1:   StaticText{bounds: [' + fBounds(21,13,31,14) + '], text: ". . . x", justify: "right"},             \
                edittext_u1: EditText{bounds:   [' + fBounds(53,11,30,19) + '], text: ". . .", properties: {multiline: false}}, \
                \
                checkbox_u2: Checkbox{bounds:   [' + fBounds(5,33,14,14) + ']},                                                 \
                static_u2:   StaticText{bounds: [' + fBounds(21,33,31,14) + '], text: ". . . x", justify: "right"},             \
                edittext_u2: EditText{bounds:   [' + fBounds(53,31,30,19) + '], text: ". . .", properties: {multiline: false}}, \
                \
                checkbox_u3: Checkbox{bounds:   [' + fBounds(5,53,14,14) + ']},                                                 \
                static_u3:   StaticText{bounds: [' + fBounds(21,53,31,14) + '], text: ". . . x", justify: "right"},             \
                edittext_u3: EditText{bounds:   [' + fBounds(53,51,30,19) + '], text: ". . .", properties: {multiline: false}}  \
            }, \
            button_all:    Button{bounds:       [' + fBounds(208,70,64,19) + '], text: "Все"},          \
            static_save:   StaticText{bounds:   [' + fBounds(5,99,75,14) + '],   text: "Сохранить в:"}, \
            drop_save:     DropDownList{bounds: [' + fBounds(78,95,287,23) + '], properties: {items: ["папку рядом с исходным файлом", "-", "Выбрать папку..."]}, helpTip:"Ooops!!!"}, \
            progress_save: Progressbar{bounds:  [' + fBounds(0,0,370,4) + '],    value:50},             \
            button_run:    Button{bounds:       [' + fBounds(4,122,70,22) + '],  text: "Создать"}       \
        };'
    );

    // -- Выбор всех значений

    dlg.show();

有一个按钮处理程序可以选择所有复选框：

// -- Выбор всех значений
dlg.button_all.addEventListener('click', function() {

    alert(dlg.panel_s.children + '\r\n' + dlg.panel_s.children.length);
    // Коллекция (9 элементов) и количество (9) отображаются верно

    alert(dlg.panel_o.children + '\r\n' + dlg.panel_o.children.length);
    // Коллекция (2 элемента) и количество (2) отображаются верно

    // Объединяем обе коллекции и три отдельных элемента
    var aPanel = [].concat(
        dlg.panel_s.children, 
        dlg.panel_o.children, 
        dlg.panel_u.checkbox_u1, 
        dlg.panel_u.checkbox_u2, 
        dlg.panel_u.checkbox_u3
    );

    alert(aPanel + '\r\n' + aPanel.length);
    // Массив отображается верно (14 элементов), но количество не совпадает (5) !
});



从处理程序代码中的注释可以看出问题出在哪里，问题如下... Array.prototype.concat()方法，根据文档，应该连接数组，将它们扩展到第一级的嵌套。实际上，根据最后一个弹出窗口（请参阅处理程序代码），这就是发生的情况 - 所有元素都按照它们添加的顺序显示在那里。
但是，在访问时aPanel[0]，不是第一个元素 ( checkbox_16)，而是返回整个集合dlg.panel_s.children。因此，数组的长度aPanel为 5，您只能通过指定集合中的嵌套来获得所需的元素，即 aPanel[0][0].

这是一个错误还是棘手的逻辑？使用concat()连接数组的正确方法是什么？

javascript