Fix bug w/ label bg rendering bad on left overflow

This commit is contained in:
LumaLivy 2021-12-18 00:28:27 -05:00
commit df292dc156

View file

@ -6,7 +6,7 @@
<div style="position: relative"> <div style="position: relative">
<canvas class="hide-subjects" id="canvas-subjects-@Model.PhotoId" width="1920" height="1080" <canvas class="hide-subjects" id="canvas-subjects-@Model.PhotoId" width="1920" height="1080"
style="position: absolute; /*width: 100%; height: 100%;*/ transform: rotate(180deg)"></canvas> style="position: absolute; transform: rotate(180deg)"></canvas>
<img id="game-image-@Model.PhotoId" src="/gameAssets/@Model.LargeHash" <img id="game-image-@Model.PhotoId" src="/gameAssets/@Model.LargeHash"
style="width: 100%; height: auto; border-radius: .28571429rem;"> style="width: 100%; height: auto; border-radius: .28571429rem;">
</div> </div>
@ -100,17 +100,17 @@
// Check if the label will flow off the left of the frame // Check if the label will flow off the left of the frame
const overflowLeft = (bounds[2] * hw - tw) < (-hw); const overflowLeft = (bounds[2] * hw - tw) < (-hw);
// Set alignment
context.textAlign = overflowLeft ? "start" : "end";
// Text x / y // Text x / y
const lx = overflowLeft ? -bw + 6 : -6; const lx = overflowLeft ? -bw + 6 : -6;
const ly = overflowBottom ? -bh - 6 : 16; const ly = overflowBottom ? -bh - 6 : 16;
// Label background x / y // Label background x / y
const lbx = overflowLeft ? -bw : -2; const lbx = overflowLeft ? bw - tw - 12 : -2;
const lby = overflowBottom ? bh : -24; const lby = overflowBottom ? bh : -24;
// Set alignment
context.textAlign = overflowLeft ? "start" : "end";
// Draw background // Draw background
context.fillRect(lbx, lby, tw + 16, th); context.fillRect(lbx, lby, tw + 16, th);