马黑黑 发表于 2024-11-17 09:16

svgdr教程·补充性质指令

<style>
        .art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
        .art mark { padding: 2px 6px; background: lightblue; }
        .art svg { outline: none; }
        .tRed { color: red; }
</style>

<div class="art">
        <h2>补充性质指令</h2>
        <p>svgdr有一些补充性质的指令，方便在绘制图像时快捷补充或重设所需要的属性。这些指令有：</p>
        <div id="content1"></div>
        <p>【说明】svgdr 这些补充性质的指令都是基于当前元素的属性进行设计，意在弥补主要绘制指令封装的局限。因此这些指令严重依赖上文即正在绘制的元素，链式结构继承上文元素，可以紧跟在主要绘制指令之后，也可以独创一行书写。下面的两种代码的写法是等价的：</p>
        <div id="div1"><pre id="pre1">
//使用 id(id) 指令给元素设置 id 标识符

//写法一
dr.rect(20,20,200,120,'none','purple', 6).id('rect1');

//写法二
dr.rect(20,20,200,120,'none','purple', 6);
dr.id('rect1');
        </pre></div>
        <p>上例第一种写法是直接链式，第二种是分行链式写法、id() 指令作用于它的上一行主要绘制指令所绘制的对象，效果一样。这是此类补充性质指令依赖上文的具体体现。由此也可知，补充类指令不可以凭空独立存在。</p>
        <p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
        <!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" targete="_blank">返回目录</a></p-->
</div>

<script type="module">

var datas = [
        [`cx(cx)`, `设置圆、椭圆等圆心X坐标，参数 cx 为cx属性值，例如：cx(120) 表示将圆心坐标cx值设为 120，会覆盖之前的设置`],
        [`cy(cy)`, `原理同 cx(cx)，作用于圆心点的cy值`],
        [`d(d)`, `设置或重设 path() 指令的 d 属性即路径描述，会覆盖之前的d属性设置`],
        [`dx(dx)`, `设置或重设当前元素的dx属性`],
        [`dy(dy)`, `设置或重设当前元素的dy属性`],
        [`fill(color)`, `设置或重设当前元素的填充色`],
        [`h(height)`, `设置或重置当前元素的 height 属性`],
        [`id(id)`, `设置或重设当前元素的 id 属性即 id 标识符`],
        [`r(r)`, `设置或重设当前元素的半径 r 属性`],
        [`rx(rx)`, `设置或重设当前元素的 rx 属性即圆角属性中的X方向半径`],
        [`ry(ry)`, `设置或重设当前元素的 ry 属性即圆角属性中的Y方向半径`],
        [`set(name, value)`, `给当前元素追加指定属性名称（name）的属性值（value）`],
        [`sets(option)`, `给当前元素追加一组属性和属性值，option 参数以键值对方式组成，例如 {fill: red, stroke: gray, 'stroke-width': 8}`],
        [`stroke(color, )`, `设置或重设当前元素描边颜色（color，必须）和描边线厚度（width，可选）`],
        [`style(string)`, `给当前元素设置行内CSS即style属性值，参数 string 为字符型，标准CSS书写格式，支持部分SVG属性纳入其中（如fill、stroke等）`],
        [`transform(value)`, `设置或重设当前元素 transform 转换属性，参数 value 为字符型，例如旋转 transform('rotate(30 150 150)')`],
        [`w(width)`, `设置或重设当前元素的 width 属性`],
        [`x(x)`, `设置或重设当前元素的 x 属性即左上角坐标x值`],
        [`x1(x1)`, `设置或重设当前元素的 x1 属性`],
        [`x1(x2)`, `设置或重设当前元素的 x2 属性`],
        [`y(y)`, `设置或重设当前元素的 y 属性即左上角坐标y值`],
        [`y1(y1)`, `设置或重设当前元素的 y1 属性`],
        [`y2(y2)`, `设置或重设当前元素的 y2 属性`],
];

var output = '';
datas.forEach((d,k) => {
        output += '<p>' + (k+1) + '. <span class="tRed">' + d + '</span> - ' + d + '</p>';
});
content1.innerHTML = output;

import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
hl.hl(div1, pre1);

</script>

梦江南 发表于 2024-11-17 09:55

谢谢黑黑老师辛苦！

花飞飞 发表于 2024-11-17 10:49

本帖最后由 花飞飞 于 2024-11-17 10:51 编辑

这个补充性指令可以对已有元素属性进行个性化补充设置或者是重置，这个就厉害了。{:4_174:}

花飞飞 发表于 2024-11-17 10:52

直接链式和分行链式写法，看着都层次分明，不难理解

红影 发表于 2024-11-17 11:41

这个梳理了对当前元素的属性进行补充设置的所有内容，太好了，可以让封装的绘制指令变得更灵活超控，真的太好了{:4_199:}

红影 发表于 2024-11-17 11:42

这个必须好好学习一下，并回头在复习一下各种封装指令。
黑黑辛苦了{:4_199:}

马黑黑 发表于 2024-11-17 13:49

花飞飞 发表于 2024-11-17 10:52
直接链式和分行链式写法，看着都层次分明，不难理解

分行不是必须的，有时候上一句太长可以考虑

马黑黑 发表于 2024-11-17 13:49

花飞飞 发表于 2024-11-17 10:49
这个补充性指令可以对已有元素属性进行个性化补充设置或者是重置，这个就厉害了。

{:4_190:}

马黑黑 发表于 2024-11-17 13:49

梦江南 发表于 2024-11-17 09:55
谢谢黑黑老师辛苦！

{:4_190:}

马黑黑 发表于 2024-11-17 13:50

红影 发表于 2024-11-17 11:41
这个梳理了对当前元素的属性进行补充设置的所有内容，太好了，可以让封装的绘制指令变得更灵活超控，真的太 ...

{:4_190:}

花飞飞 发表于 2024-11-17 18:29

马黑黑 发表于 2024-11-17 13:49
分行不是必须的，有时候上一句太长可以考虑

好哒，太挤了就单列一行很说得过去{:4_173:}

花飞飞 发表于 2024-11-17 18:31

马黑黑 发表于 2024-11-17 13:49


我支持一下，还赚杯茶，乐一个。。{:4_173:}

红影 发表于 2024-11-17 19:42

马黑黑 发表于 2024-11-17 13:50


这个整理太好了，黑黑辛苦了{:4_187:}

马黑黑 发表于 2024-11-17 21:21

红影 发表于 2024-11-17 19:42
这个整理太好了，黑黑辛苦了

手掌辛苦

红影 发表于 2024-11-17 21:52

马黑黑 发表于 2024-11-17 21:21
手掌辛苦

都辛苦，黑黑最辛苦{:4_187:}{:4_190:}

马黑黑 发表于 2024-11-17 23:13

红影 发表于 2024-11-17 21:52
都辛苦，黑黑最辛苦

{:4_173:}

红影 发表于 2024-11-18 22:45

马黑黑 发表于 2024-11-17 23:13


{:4_190:}
页: [1]
查看完整版本: svgdr教程·补充性质指令