search

Rando-Mania / RandoTracker

Web based version of the Randomizer Tracker
6 stars 7 forks source link

flatten clipping masks #179

Open jsnkuhn opened 2 years ago

jsnkuhn commented 2 years ago

Current code for the 1p clipping mask is five images... this works but isn't great. Long term this needs optimizing. Should be easy enough to make one vertical gradient image and one horizontal gradient image. This would be much less work for the browsers even tough each gradient would be more complex. similar processor savings can be gained on the 2p-4p layouts as well.

mask:
        /* vertical lines */
        linear-gradient(red,red) left / var(--clipX1),
        linear-gradient(red,red) right / var(--clipX1),
        linear-gradient(red,red) center / calc(100% - var(--clipX2) * 2),
        /* horizontal lines */
        linear-gradient(red,red) top / 100% var(--clipY1),
        linear-gradient(red,red) bottom / 100% calc(100% - var(--clipY2));

Theoretically would be best to draw out an svg for this but with the need for css vars to keep things up to date with layout changes I'm not sure that is possible. Maybe a paint API thing. Once/IF ever paint API has better support.

jsnkuhn commented 2 years ago

looks like I already did this on the 1p layouts. code above is for 2p. Current for 1p is:

mask:
  linear-gradient(to right, red var(--clipX1), #0000 var(--clipX1) var(--clipX2), red 0), 
  linear-gradient(red var(--clipY1), #0000 var(--clipY1) var(--clipY2), red 0);
jsnkuhn commented 2 years ago

this has gone through a couple of iterations already. I think the CSS paint API may be the way to go here especially for 4p layouts and those that need more than 4 clipped area. Current code does not scale well. Testing Paint API stuff in the 2p template. Works great in chrome but the polyfill for other browsers is iffy at best.... Not exactly sure where to go from here.