在画布上分层矩形会导致不透明度增加 [英] Layering Rectangles on a Canvas Causes Opacity to Increase

问题描述

我正在使用jpeg图像和要绘制到图像上的矩形在图像上做注释.然后，我可以将图像转移到画布上，并使用for循环，可以抓取在图像上绘制的矩形div的边界，然后在画布上重新绘制.

I am making annotations on images using a jpeg image and rectangles that I am drawing onto the image. I can then transfer the image to a canvas, and, using a for-loop, I can grab the bounds of the rectangular divs that I had drawn on the image to re-draw on the canvas.

当我有多个矩形时会出现问题，因为由于每个后续矩形都被分层，因此每个后续矩形的不透明度都会降低，例如:

The problem arises when I have multiple rectangles because the opacity decreases on each subsequent rectangle due to the fact that they are being layered, as such: `

    function drawRectangleToCanvas(left, top, width, height, canvas, context, opacity) { 

    context.globalCompositeOperation='destination-over';
    context.strokeStyle = 'rgba(0,255,130,0.7)';
    context.fillStyle = 'rgba(0,0,255,'+opacity+')';
    context.rect(left, top, width, height);
    context.setLineDash([2,1]);
    context.lineWidth = 2;
    context.fill();
    context.stroke();

    }

根据我的理解，context.globalCompositeOperation='destination-over'使矩形像面包片一样放置在图像上.对于在div上绘制的每个矩形，不透明度会重叠，从而导致不透明度增加0.1倍.问题是这样的:具有分层矩形和不透明度问题的画布.

From my understanding, the context.globalCompositeOperation='destination-over' causes the rectangles to be placed onto the image like slices of bread. With each rectangle that is drawn on the div, the opacities overlap, causing the opacity to increase by a factor of, in this case, 0.1. This is what the issue looks like: Canvas with layered rectangles and opacity problems.

我如何只添加所有矩形而不会出现此不透明性问题?我为我拥有的每个矩形都调用此方法，所以我不知道是否可以将所有矩形都放在数组中或其他内容.任何解决此问题的建议都会有所帮助.

How can I just add all the rectangles without this opacity issue? I call this method for each and every rectangle that I have, so I didn't know if I could put all the rectangles in an array or what. Any suggestions to fix this would be helpful.

最暗的矩形是第一个要绘制的矩形，只是为了添加一些信息.

The darkest rectangle is the first one to be drawn, just to add some information.

推荐答案

不是完全确定想要什么，但是在定义了所有矩形之前，可以忽略对stroke和fill方法的调用.

Not completely sure what you want but you can leave out the calls to the stroke and fill methods until you have defined all the rectangles.

    // Not much left to do in the function but just here to illustrate
    // that creating the rectangles should be put together
    function drawRectangleToCanvas(left, top, width, height, canvas, context){ 
        context.rect(left, top, width, height);
    }

    context.globalCompositeOperation='destination-over';
    context.strokeStyle = 'rgba(0,255,130,0.7)';
    context.fillStyle = 'rgba(0,0,255,'+opacity+')';
    context.setLineDash([2,1]);
    context.lineWidth = 2;
    context.beginPath();
    while(??? ){
        // loop and define all the rectangles 
        drawRectangleToCanvas(...  //
    }
    // once all the rectangles are defined 
    // call the fill and stroke to render them
    context.fill();
    context.stroke();

这将阻止它们合成Alpha值

This will stop them compounding the alpha values

这篇关于在画布上分层矩形会导致不透明度增加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！