javascript - 如何在两个多边形的交点处显示图像？

Question

我有一个想法，我正在尝试使用 Javascript 和 html5 Canvas 进行编码，但我不确定从哪里开始。

假设您有多个不同颜色的多边形(现在假设是矩形，但理想情况下是伪随机不规则多边形)。您可以通过单击并拖动来移动多边形。

当您将一个多边形拖动到另一个多边形上时，我想在相交区域显示图像。想象一下，将蓝色多边形拖动到红色多边形上以创建紫色区域，只不过不是紫色，而是豹纹图案、照片或类似图案。

如有任何帮助，我们将不胜感激!谢谢!

Answer 1

使用 2d 上下文剪辑功能。正常绘制形状，然后再次绘制它们，但在每个形状后面使用剪辑而不是填充。

每个剪辑都会应用于前一个剪辑。

设置所有剪辑形状后，在顶部绘制图像/形状，并且仅显示剪辑区域内的部分。

要删除剪辑，您需要使用“保存”和“恢复”(请参阅​​演示)；

使用我刚刚编写的另一个示例中的代码，有点懒。

示例显示使用 2D 上下文的剪辑功能将 3 个框合并为蓝色。

/** SimpleUpdate.js begin **/
// short cut vars 
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
ctx.font = "18px arial";
var cw = w / 2;  // center 
var ch = h / 2;
var angle = 0;
var focused = false;
var rotated = false;

// Handle all key input
const keys = {  // key input object
    ArrowLeft : false,  // only add key names you want to listen to
    ArrowRight : false,
    keyEvent (event) {
        if (keys[event.code] !== undefined) {  // are we interested in this key
            keys[event.code] = event.type === "keydown";
            rotated = true; // to turn off help
        }
    }
}
// add key listeners
document.addEventListener("keydown", keys.keyEvent)
document.addEventListener("keyup", keys.keyEvent)

// check if focus click
canvas.addEventListener("click",()=>focused = true);

// main update function
function update (timer) {
    ctx.setTransform(1, 0, 0, 1, 0, 0);  // reset transform
    ctx.clearRect(0,0,w,h);      
    
    // draw outside box
    ctx.fillStyle = "red"
    ctx.fillRect(50, 50, w - 100, h - 100);
    
    // rotate if input
    angle += keys.ArrowLeft ? -0.1 : 0;
    angle += keys.ArrowRight ? 0.1 : 0;
    
    // set orgin to center of canvas
    ctx.setTransform(1, 0, 0, 1, cw, ch);
    
    // rotate
    ctx.rotate(angle);
    
    // draw rotated box
    ctx.fillStyle = "Black"
    ctx.fillRect(-50, -50, 100, 100);
    
    // set transform to center
    ctx.setTransform(1, 0, 0, 1, cw, ch);
    // rotate
    ctx.rotate(angle);
    // move to corner
    ctx.translate(50,50);
    // rotate once more, Doubles the rotation
    ctx.rotate(angle);
    
    ctx.fillStyle = "yellow"
    ctx.fillRect(-40, -40,80, 80);

    ctx.setTransform(1, 0, 0, 1, 0, 0);  // restore default
    



    // set up the clip area
    ctx.save();  // save the non cliped canvas state
    ctx.beginPath();
    ctx.rect(50, 50, w - 100, h - 100);
    ctx.clip(); // clip main box

    // set orgin to center of canvas
    ctx.setTransform(1, 0, 0, 1, cw, ch);    
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.rect(-50, -50, 100, 100);
    ctx.clip(); // add to clip (reduces area

    ctx.setTransform(1, 0, 0, 1, cw, ch);
    ctx.rotate(angle);
    ctx.translate(50,50);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.rect(-40, -40,80, 80);    
    ctx.clip();

    ctx.setTransform(1, 0, 0, 1, 0, 0);  // restore default
    
    ctx.fillStyle = "blue"
    ctx.fillRect(0, 0, w, h);
    
    ctx.restore();  // this removes the clip. It is the only way to remove it
                    // apart from reseting the context
    
    
    
    ctx.fillStyle = "white"
    ctx.lineWidth = 3;
    if(!focused){
        ctx.strokeText("Click on canvas to get focus.",10,20);
        ctx.fillText("Click on canvas to get focus.",10,20);
    }else if(!rotated){
        ctx.strokeText("Left right arrow to rotate.",10,20);
        ctx.fillText("Left right arrow to rotate.",10,20);
    }else{
        ctx.strokeText("Blue is the union of the...",10,20);
        ctx.fillText("Blue is the union of the...",10,20);
        ctx.strokeText("...yellow, black, and red boxes.",10,h-5);
        ctx.fillText("...yellow, black, and red boxes.",10,h-5);
    }

    requestAnimationFrame(update);

}
requestAnimationFrame(update);


/** SimpleUpdate.js end **/

<canvas id = canvas></canvas>