Draw colored Background Layer #318

sschmidTU · 2018-08-03T09:45:54Z

We now draw a colored rectangle in VexflowBackend.clear(), which we call in OpenSheetMusicDisplay.render().

This enables directly right-click copying or saving the rendered score when using the Canvas backend, which is pretty convenient. Now we don't have to take a screenshot or edit image transparency anymore.

Previously, the canvas image had a transparent background:

Now it's white by default (saved as engraving rule).

The commits displayed here aren't that relevant, just look at the File changed. I'll squash the messages.

…end selector

…y. placement still bugged part of #307

…ng (should be white). setting backgroundFillStyle doesn't solve the problem for some reason. attempt at #312

probably bug in vexflow.

…r for nicer code

bneumann

Please also check the skybottomlinecalculator there is also a clear call but I can't remember which function it uses

bneumann · 2018-08-03T09:54:01Z

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -161,8 +161,13 @@ export class OpenSheetMusicDisplay {
        this.drawer.clear();
        this.drawer.resize(width, height);
        this.drawer.scale(this.zoom);
+
+        // clear and fill with background color
+        this.drawer.clear(0, 0, width, height);


There are 2 clears. Why?

the first clear actually only removes the SVG children in the SVG backend in this case. I left it in in case the resizing and scaling is slower if we don't remove the SVG children beforehand.

So, clear without arguments behaves like before, clear with position and dimensions makes a colored background (rectangle).

We could separate these methods, of course. But i don't think removing children from a list or drawing a single rectangle costs much performance.

bneumann · 2018-08-03T09:54:40Z

external/vexflow/vexflow.d.ts

+            // this somehow works, though.
+            public background_fillStyle: { fill: string };
+            public setBackgroundFillStyle(style: string): void;
+            public clear(x: number, y: number, width: number, height: number): void;
        }


I really don't like the idea that I need to know my canvas size to clear it.

you only need to know it if you want to fill it with the background color though. with default arguments it behaves as before. Also, canvas.width and canvas.height is often wrong in the canvas backend, too small.

sschmidTU · 2018-08-03T10:08:39Z

SkyBottomLineCalculator's clear calls will behave as before, because of default arguments.
canvascontext.clearRect() currently doesn't do anything in vexflow by the way.

bneumann · 2018-08-03T11:28:35Z

Alright rest looks good to me then

sschmidTU · 2018-08-03T11:33:39Z

@bneumann so is there anything else i need to review? SkyBottomLineCalculator works as before.

bneumann · 2018-08-03T11:39:03Z

I can't think of anything else right now. That function is pretty low level but has not really been used before so should not be a biggie

sschmidTU · 2018-08-03T11:42:36Z

@bneumann just asking because your review still requests changes. But i've noted your LGTM ;)

bneumann · 2018-08-03T11:45:39Z

Si señor, problem is I cannot reopen the review on my phone

sschmidTU · 2018-08-03T12:43:36Z

Seems like i broke the cursor, so right now this should not be merged. I'm fixing it among other things.

…z=0 layer)

sschmidTU · 2018-08-03T14:55:52Z

The cursor was broken because it's drawn on z-layer -1 in HTML, behind everything else, so it needs transparency on the next layers to be visible. So right now, we can't have the cursor and a colored background.
I thought about drawing the background on a deeper z-layer similar to the cursor, but the problem is that the cursor does not appear on the image if you copy it because it's not on the same canvas, so the background will have the same problem.
The comments in the Cursor class do say that it should be implemented differently. But it won't be easy to draw it as a background layer like it is now.

We can actually have Cursor and background right now if we move the Cursor to the z=0-layer, but then the notes won't paint over the cursor anymore:

This is the current state of the PR, but i'm not sure we want to make this tradeoff right now.

sschmidTU · 2020-03-04T21:42:17Z

Currently implemented is an optional background color:

osmd.setOptions({pageBackgroundColor: '#FFFFFF'})

this will make the cursor invisible.

This PR still has a better compromise, but always changes the look (see above).
(also see #312)

sschmidTU added 13 commits July 26, 2018 17:16

fix(demo): extend sample name box length to not cut off sample titles

e573414

fix(demo): sample names: last name first, then first names

8fc4a39

fix(demo): sample list: prevent comma cut-off, align height with back…

e2c37c6

…end selector

fix(demo): fix css desired sample width

65d1d30

fix(demo): Bach "C Dur" -> "C-Dur"

c62fb02

fix(in-measure clef): add as NoteSubGroup instead of ClefNote directl…

41ee64f

…y. placement still bugged part of #307

in-measure clef: simplified adding modifier

27a17ed

fix indentation

deca591

add in-measure clefs to function test

82a0a34

attempt to fix canvas image having a transparent background when savi…

3ab11ba

…ng (should be white). setting backgroundFillStyle doesn't solve the problem for some reason. attempt at #312

experimental code for background color. works for SVG, not for Canvas.

73cdb2b

probably bug in vexflow.

fix(canvasBackground): draw white background rectangle

b1d1dee

Merge branch 'develop' into fix/transparentToWhiteBackground, refacto…

76d0f93

…r for nicer code

sschmidTU added the enhancement a (small) improvement that neither adds nor fixes a significant feature label Aug 3, 2018

sschmidTU self-assigned this Aug 3, 2018

sschmidTU requested a review from bneumann August 3, 2018 09:45

sschmidTU mentioned this pull request Aug 3, 2018

Canvas background color in saved image #312

Closed

bneumann requested changes Aug 3, 2018

View reviewed changes

sschmidTU added 2 commits August 3, 2018 14:00

add ability to set background color, also to transparent

9b5e602

try to fix cursor not showing

f2107c1

fix background color with cursor, but cursor is less transparent (on …

ada473e

…z=0 layer)

bneumann approved these changes Aug 20, 2018

View reviewed changes

sschmidTU mentioned this pull request Apr 30, 2020

Customize Background color #729

Closed

matt-uib closed this May 14, 2020

matt-uib deleted the fix/transparentToWhiteBackground branch May 14, 2020 08:48

matt-uib restored the fix/transparentToWhiteBackground branch May 14, 2020 09:45

sschmidTU reopened this May 14, 2020

sschmidTU force-pushed the develop branch 2 times, most recently from 9b4a2fa to a64b76e Compare March 30, 2023 21:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Draw colored Background Layer #318

Draw colored Background Layer #318

sschmidTU commented Aug 3, 2018 •

edited

bneumann left a comment

bneumann Aug 3, 2018

sschmidTU Aug 3, 2018 •

edited

bneumann Aug 3, 2018

sschmidTU Aug 3, 2018 •

edited

sschmidTU commented Aug 3, 2018 •

edited

bneumann commented Aug 3, 2018

sschmidTU commented Aug 3, 2018 •

edited

bneumann commented Aug 3, 2018

sschmidTU commented Aug 3, 2018

bneumann commented Aug 3, 2018

sschmidTU commented Aug 3, 2018

sschmidTU commented Aug 3, 2018

sschmidTU commented Mar 4, 2020

Draw colored Background Layer #318

Are you sure you want to change the base?

Draw colored Background Layer #318

Conversation

sschmidTU commented Aug 3, 2018 • edited

bneumann left a comment

Choose a reason for hiding this comment

bneumann Aug 3, 2018

Choose a reason for hiding this comment

sschmidTU Aug 3, 2018 • edited

Choose a reason for hiding this comment

bneumann Aug 3, 2018

Choose a reason for hiding this comment

sschmidTU Aug 3, 2018 • edited

Choose a reason for hiding this comment

sschmidTU commented Aug 3, 2018 • edited

bneumann commented Aug 3, 2018

sschmidTU commented Aug 3, 2018 • edited

bneumann commented Aug 3, 2018

sschmidTU commented Aug 3, 2018

bneumann commented Aug 3, 2018

sschmidTU commented Aug 3, 2018

sschmidTU commented Aug 3, 2018

sschmidTU commented Mar 4, 2020

sschmidTU commented Aug 3, 2018 •

edited

sschmidTU Aug 3, 2018 •

edited

sschmidTU Aug 3, 2018 •

edited

sschmidTU commented Aug 3, 2018 •

edited

sschmidTU commented Aug 3, 2018 •

edited