html - clip-path绘制工具

场景

在设计大屏、首页时，会用到一些特殊的几何图案；

简单的，我们可以使用图片，实现起来自然十分容易；

不过图片有很多的限制，比如说，修改色彩的时候，需要重新制作图片。

为了解决这个问题，这里又有几种方案：

• 使用 svg，找个工具，把图片转换成 svg，svg 可以通过样式调整色调；
• 使用 clip-path 绘制特殊几何形状；

那么就有一个问题：如果我们已经有一个图片，如何获取图片中的坐标信息呢？

工具

代码基于 vue3，功能：将图片作为背景，按顺序，挨个点一下多边形的拐角，控制台会打印对应的 clip-path。

后期拓展：

如果期望几何形状可以拖拽，可以基于 openlayer 实现，让 AI 帮忙生成一下代码。

<template>
    <div style="width: 100%; height: 100vh; box-sizing: border-box; background-color: rgb(13, 78, 87)">
        <div style="margin: 0 auto;padding-top: 100px;width: 50%;">

            <div id="canvas-container">
                <canvas id="click-canvas"></canvas>
            </div>
            <div id="coords-list">Clicked coordinates will appear here:</div>

            <div class="clipped-div"></div>
        </div>
    </div>
</template>

<script setup lang="ts">

import {onMounted} from "vue";

onMounted(() => {
    const canvas = document.getElementById('click-canvas');
    const ctx = canvas.getContext('2d');
    const coordsList = document.getElementById('coords-list');
    let clickCoords = ''; // 存储点击坐标

    // 设置 canvas 尺寸与容器一致
    function resizeCanvas() {
        const container = document.getElementById('canvas-container');
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
    }

    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    // 点击事件处理
    canvas.addEventListener('click', (event) => {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        // 存储坐标
        clickCoords += `${x.toFixed(0)}px ${x.toFixed(0)}px,\r\n`;

        // 绘制圆点
        drawDot(x, y);

        // 更新坐标列表
        // coordsList.innerHTML += `<p>Clicked at: (${x.toFixed(1)}, ${y.toFixed(1)})</p>`;

        console.log(clickCoords);
    });

    // 绘制圆点函数
    function drawDot(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, Math.PI * 2); // 半径 5px
        ctx.fillStyle = '#ff4757';
        ctx.fill();
    }

})

</script>

<style lang="scss">

#canvas-container {
    width: 500px;
    height: 300px;
    margin: 20px auto;
    position: relative;
    background-size: cover; /* 关键：图片缩放至完全覆盖容器 */
    background: url("/img/panel.png") no-repeat center;

    background-size: contain; /* 关键：图片完整显示，可能留白 */

}

#click-canvas {
    border: 2px dashed #ccc;
    cursor: crosshair;
}

#coords-list {
    margin: 20px auto;
    width: 500px;
    font-family: Arial, sans-serif;
}

.clipped-div {
    width: 500px;
    height: 300px;
    box-sizing: border-box;
    background: rgb(18, 105, 116);
    // 重点是这个
    clip-path: polygon(
                    0% 15%,
                    15% 35%,
                    35% 100%,
                    100% 0%,
                    100% 85%,
                    85% 100%,
                    0% 100%);
 }

</style>