logo标签列表

HTML5画布合并矩形以形成新形状

javascripthtmlcanvas
4
我有一个页面，你可以在上面绘制正方形。这些正方形将代表一个房间，因此你有一个正方形，然后在第一个正方形上再画一个，然后两个正方形就会连接起来。
它看起来像这样http://puu.sh/bllo7/95e2112d79.png 并且工作方式如此 http://jsfiddle.net/bLenxexL/ 我需要找出如何让这些正方形组成另一个形状，该形状将类似于上图右侧的形状。
如果有帮助的话，正方形的信息以以下格式存储在points中。
[    {        start: {x: 312, y: 164},         end: {x: 734, y: 371}    },    {        start: {x: 696, y: 304},         end: {x: 1060, y: 561}    }]

任何有助于我完成此任务的资源链接都将非常有帮助，谢谢。
1个回答
8
您可以使用合成来创建一个围绕您组合的矩形的单一描边。
- 用笔画绘制所有矩形 - 将混合模式设置为“destination-out”。这会导致新的绘图“擦除”两个重叠部分所存在的绘图。 - 填充所有矩形。这将擦除除组合矩形轮廓以外的所有内容。
这是因为笔画在矩形边框的中间绘制。当您擦除组合矩形的内部时，只会剩下半在矩形边缘之外的笔画。
示例代码和演示：http://jsfiddle.net/m1erickson/m5jg92wd/ 
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw all rects with strokes
    ctx.strokeRect(20,20,100,200);
    ctx.strokeRect(90,110,75,50);

    // set compositing to erase existing drawings 
    // new drawings will erase existing drawings where the two overlap
    ctx.globalCompositeOperation='destination-out';

    // fill all rects
    // This "erases" all but the outline stroke
    ctx.fillRect(20,20,100,200);
    ctx.fillRect(90,110,75,50);

    // reset compositing to its default mode
    ctx.globalCompositeOperation='source-over';

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接