马黑黑offset-path ray函数演示（二）

醉美水芙蓉

在 offset-path ray函数演示（一） 中，大家可能已经对 ray() 函数有了些许印象，本演示则需要了解更多：ray 函数的所有参数以及其它相关知识。

💡ray() 函数语法：

ray(<angle> && <size>? && contain? && [at <position>]?)
对应参数含义：射线角度、射线长度、块内包含、射线起点位置。参数顺序没有硬性规定。

💡ray()函数参数

序号	参数	说明
1	angle	必须参数，规范射线方向，角度值，0deg 向上，顺时针增加
2	size	可选参数，路径长度，即 offset-distance 0% 和 100% 之间的距离，相对于包含块。可选值有 closest-side（最近边，默认）、 farthest-side（最远边）、closest-corner（最近角）、farthest-corner（最远角）、sides（沿角度到容器边界）
3	contain	可选参数，元素全程不超出包含块缩短线段的长度（设计本意，算法或浏览器支持度待改进）
4	at position	可选参数，指定射线的起点以及元素在其包含块中的放置位置，缺省默认 at 50% 50%

💡主要配套CSS属性

offset-distance - 沿路径的位置（0% ~ 100%）
offset-position - 射线起点（默认 50% 50%）
offset-rotate - 元素朝向（auto：随路径转向，角度值：朝向固定）
offset-anchor - 元素锚点（默认元素中心点）

💡演示代码（支持预览）：

以下示例设计为综合性演示，ray() 的四个参数一起用上。演示代码不理解没有关系，关键在于演示体验：不同的参数组合生成的射线路径各异，体验时慢慢领会。体验中通过调节不同参数的值、查看 movebox 元素的运动状态应该有助于理解射线路径形态。演示加入了 offset-distance 相抵路径动画效果，在调整射线角度后触发。体验当中注意观察动态生成的 offset-path 路径代码。

<style>
    @import 'https://638183.freep.cn/638183/web/css/hl.css';
    h2 { text-align: center; }
    .pa {
        width: 800px;
        height: 400px;
        border: 1px solid gray;
        position: relative;
        margin: 30px auto 0;
    }
    .pa:nth-of-type(1)::before {
        position: absolute;
        content: attr(data-code);
        width: 100%;
        bottom: 10px;
        text-align: center;
    }
    .pa:nth-of-type(2) {
        border-width: 0;
    }
    .movebox {
        padding: 0px;
        font-size: 36px;
        border: 1px solid gray;
        position: absolute;
    }
    @keyframes move {
        from { offset-distance: 0%; }
        to { offset-distance: 100%; }
    }
</style>

<h2>ray()函数综合演示</h2>
<div id="pa" class="pa hlCode" data-code="offset-path尚未生成">
    <div class="movebox">➡️</div>
</div>
<div class="pa">
    <p>
        <label for="rangeSet">调整角度 ：</label>
        <input id="rangeSet" type="range" value="0" max="360" min="-360" step="5" />
        <output id="outRes">0</output>
    </p>
    <p>
        <label>路径长度：</label>
        <input id="r1" type="radio" name="size" value="closest-side" checked />
        <label for="r1">closest-side</label>
        <input id="r2" type="radio" name="size" value="farthest-side" />
        <label for="r2">farthest-side</label>
        <input id="r3" type="radio" name="size" value="closest-corner" />
        <label for="r3">closest-corner</label>
        <input id="r4" type="radio" name="size" value="farthest-corner" />
        <label for="r4">farthest-corner</label>
        <input id="r5" type="radio" name="size" value="sides" />
        <label for="r5">sides</label>
    </p>
    <p>
        <label for="chkContain">contain ：</label>
        <input id="chkContain" type="checkbox" value="contain" checked />
    </p>
    <p>
        <label for="atX">射线起点(x坐标)：</label>
        <input id="atX" type="range" max="100" min="0" value="50"/>
        <output id="outX">50%</output>
    </p>
    <p>
        <label for="atY">射线起点(y坐标)：</label>
        <input id="atY" type="range" max="100" min="0" value="50"/>
        <output id="outY">50%</output>
    </p>
    <p><button onclick="location.reload()">全部重置</button></p>
</div>
<script>
    const movebox = document.querySelector('.movebox');
    
    movebox.onanimationend = () => rangeSet.disabled = false;
    
    movebox.onanimationstart = () => rangeSet.disabled = true;
    
    rangeSet.oninput = () => {
        outRes.value = rangeSet.value + 'deg';
        movebox.style.setProperty('offset-path', createRayPath());
    }
    
    rangeSet.onchange = () => {
        const path = createRayPath();

        movebox.style.animation = '';
        pa.dataset.code = `offset-path: ${path};`;
        
        setTimeout( () => {
            movebox.style.setProperty('offset-path', `${path}`);
            movebox.style.setProperty('animation', 'move linear 2s forwards');
        }, 500);
    };
    
    atX.oninput = () => {
        movebox.style.setProperty('offset-path', createRayPath());
        outX.value = `${atX.value}%`;
    };
    atY.oninput = () => {
        movebox.style.setProperty('offset-path', createRayPath());
        outY.value = `${atY.value}%`;
    };
    
    function createRayPath() {
        const contain = chkContain.checked ? 'contain' : '';
        const size = document.querySelector('input[name="size"]:checked').value;
        const pos = `${atX.value}% ${atY.value}%`;
        let ray = `${rangeSet.value}deg ${contain} ${size} at ${pos}`.replaceAll('  ', ' ');
        ray = `ray(${ray})`;
        return ray;
    }
</script>