JavaScript Path2D对象：理解变量引用与实现自定义命名追踪

let somePath = new Path2D();
// 添加一些绘制指令到 somePath...

console.log(somePath);             // 输出: Path2D {} (对象类型及空内容表示)
console.log(String(somePath));     // 输出: [object Path2D] (对象的默认字符串表示)
console.log(JSON.stringify(somePath)); // 输出: {} (Path2D对象通常无法被JSON序列化为有意义的内容)

// 假设有一个Canvas上下文
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

// 创建第一个Path2D对象
let pathA = new Path2D();
pathA.rect(10, 10, 50, 50); // 绘制一个矩形
let pathAName = '矩形A';

// 创建第二个Path2D对象
let pathB = new Path2D();
pathB.arc(100, 30, 20, 0, Math.PI * 2); // 绘制一个圆形
let pathBName = '圆形B';

// 假设在某个交互事件中需要识别路径
// 例如，模拟鼠标点击，并判断点击是否在某个路径内
function handlePathSelection(eventX, eventY) {
    let selectedPath = null;
    let selectedPathName = '';

    if (ctx.isPointInPath(pathA, eventX, eventY)) {
        selectedPath = pathA;
        selectedPathName = pathAName;
    } else if (ctx.isPointInPath(pathB, eventX, eventY)) {
        selectedPath = pathB;
        selectedPathName = pathBName;
    }

    if (selectedPath) {
        console.log(`检测到点击了路径: ${selectedPathName}`);
        // 可以在这里对 selectedPath 进行操作
    } else {
        console.log('未点击任何已知路径。');
    }
}

// 绘制路径以便测试
ctx.stroke(pathA);
ctx.stroke(pathB);

// 模拟一次点击事件，例如点击矩形A的中心
handlePathSelection(35, 35); // 应该输出: 检测到点击了路径: 矩形A

// 模拟一次点击事件，例如点击圆形B的中心
handlePathSelection(100, 30); // 应该输出: 检测到点击了路径: 圆形B

// 模拟一次点击事件，未点击任何路径
handlePathSelection(200, 200); // 应该输出: 未点击任何已知路径。

const paths = []; // 存储 { path: Path2D对象, name: '路径名称' }

paths.push({ path: new Path2D(), name: '正方形' });
paths[0].path.rect(10, 10, 50, 50);

paths.push({ path: new Path2D(), name: '圆形' });
paths[1].path.arc(100, 30, 20, 0, Math.PI * 2);

function findPathAtPoint(eventX, eventY) {
    for (const item of paths) {
        if (ctx.isPointInPath(item.path, eventX, eventY)) {
            return item; // 返回包含路径对象和名称的对象
        }
    }
    return null;
}

// 模拟点击
const clickedItem = findPathAtPoint(35, 35);
if (clickedItem) {
    console.log(`点击了: ${clickedItem.name}`);
    ctx.stroke(clickedItem.path); // 再次绘制或高亮选中的路径
}

const pathMap = new Map();

const rectPath = new Path2D();
rectPath.rect(10, 10, 50, 50);
pathMap.set('rectPath', rectPath); // 将名称作为键，Path2D对象作为值

const circlePath = new Path2D();
circlePath.arc(100, 30, 20, 0, Math.PI * 2);
pathMap.set('circlePath', circlePath);

// 遍历Map以查找
function findPathByName(name) {
    return pathMap.get(name);
}

const retrievedRect = findPathByName('rectPath');
if (retrievedRect) {
    console.log('成功通过名称获取到矩形路径。');
    ctx.stroke(retrievedRect);
}