Add a ShadowedRectangle item
ClosedPublic

Authored by ahiemstra on Mar 11 2020, 3:19 PM.

Details

Summary

This adds a ShadowedRectangle item, which is a rectangle with a shadow.
It uses a custom shader that draws the rectangle and the shadow below it
using distance fields, which has significantly better performance compared
to the DropShadow effect. It also supports rounded corners, which the
current Card code does not.

This is a first step to moving more of AbstractCard and related items to
C++ code. Other bits will include a ShadowedImage item and moving actual
card code to C++.

Test Plan

Screenshot of test program showing ShadowedRectangle, Rectangle with DropShadow effect and empty Kirigami Card.

Rounded corners.

Performance comparison:

The video at top is using Rectangle with DropShadow, the one below that ShadowedRectangle.

Diff Detail

Repository
R169 Kirigami
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
ahiemstra created this revision.Mar 11 2020, 3:19 PM
Restricted Application added a project: Kirigami. · View Herald TranscriptMar 11 2020, 3:19 PM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
ahiemstra requested review of this revision.Mar 11 2020, 3:19 PM
ahiemstra edited the summary of this revision. (Show Details)Mar 11 2020, 3:50 PM
ahiemstra edited the test plan for this revision. (Show Details)
zzag added a subscriber: zzag.EditedMar 11 2020, 4:08 PM

Are there any significant differences between shadows that were generated using distance fields and shadows that were generated with a blur filter(e.g. box blur or stack blur, etc)? (asking out of curiosity)

EDIT: Urgh, never mind. You've just updated the test plan.

Yeah I can't upload screenshots etc. through Arc so I always need to upload those afterwards.

ahiemstra updated this revision to Diff 77427.Mar 11 2020, 4:27 PM
  • Add a manual test
cblack added a subscriber: cblack.Mar 11 2020, 4:32 PM

I feel like a border property would be desirable for the following usecases:

  • Cards that have no elevation when resting
  • Fallback for when shadows are too heavy

How does the shadow look and perform when animating?

This revision was not accepted when it landed; it landed in state Needs Review.Mar 11 2020, 4:38 PM
This revision was automatically updated to reflect the committed changes.
ahiemstra reopened this revision.Mar 11 2020, 4:45 PM

Argh I hate arc

I feel like a border property would be desirable for the following usecases:

  • Cards that have no elevation when resting
  • Fallback for when shadows are too heavy

The fallback case is not going to be relevant, a border is going to be as heavy as the shadow is with this approach. But I'm fine with adding a border, also to make it behave more like Rectangle in general.

How does the shadow look and perform when animating?

Animating what?

How does the shadow look and perform when animating?

Animating what?

Attributes of a shadow (size/radius, offsets)

ahiemstra updated this revision to Diff 77436.Mar 11 2020, 4:55 PM
  • Convert to SPDX identifiers

Attributes of a shadow (size/radius, offsets)

Performance isn't going to be much different between any of these properties, except that a few will be slightly faster because they won't need to resize geometry.

For appearance:

ahiemstra updated this revision to Diff 77446.Mar 11 2020, 6:15 PM
  • Remove QRectF parameter from ShadowedRectNode ctor
  • Properly initialize offset and aspect ratio variables of ShadowedRectNode
mart added a subscriber: mart.Mar 11 2020, 7:25 PM

tested it locally, works beautifully

mart requested changes to this revision.Mar 12 2020, 11:42 AM

to me is good, would just change that one thing api wise.
do you think there are other blockers from a technical pov or good to go?

src/shadowedrectangle.h
16

shadowSize to correspond with shadowColor

This revision now requires changes to proceed.Mar 12 2020, 11:42 AM

I've been adding some documentation, in addition to border properties. With that I'm fairly sure this is ready.

ahiemstra added inline comments.Mar 12 2020, 11:59 AM
src/shadowedrectangle.h
16

I've actually been pondering making it a grouped property, it would make it more similar to border.

So then you'd have:

ShadowedRectangle {
    shadow {
        size: 10
        color: "red"
        xOffset: 10
        yOffset: 10
    }
}
ahiemstra updated this revision to Diff 77504.Mar 12 2020, 1:26 PM
  • Documentation
  • Add support for rendering a border
ahiemstra updated this revision to Diff 77506.Mar 12 2020, 1:56 PM
  • Convert shadow properties of ShadowedRectangle to a grouped property
ahiemstra marked an inline comment as done.Mar 12 2020, 1:58 PM
ahiemstra added inline comments.
src/shadowedrectangle.h
16

Done that now.

ahiemstra retitled this revision from [WIP] Add a ShadowedRectangle item to Add a ShadowedRectangle item.Mar 12 2020, 2:03 PM

With that, I think this is now completely ready.

mart accepted this revision.Mar 12 2020, 5:04 PM
This revision is now accepted and ready to land.Mar 12 2020, 5:04 PM
This revision was automatically updated to reflect the committed changes.