RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-265406

UModeL's questions

Martin Hope
UModeL
Asked: 2021-11-19 14:39:11 +0000 UTC

feComposite 过滤器:在相交处移除形状的一部分

  • 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
  • 1 个回答
  • 10 Views
Martin Hope
UModeL
Asked: 2020-07-27 07:04:22 +0000 UTC

Array.prototype.concat() 是如何工作的

  • 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
  • 1 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5