qt - DropShadow for translucent items -

-

i have problem create shadow in item. item not opaque , drawn shadow appears behind item reducing transparency effect.

i need picture right, got attempts shown left. need through object, because background not solid. .

i tried use maskef object becomes opaque. closest solution i've managed define use element of same shape transparent , solid edge. don't solid edge, suggestions?

first attempt. makes opacity equal 1 in rec1:

rectangle {     id: rec1; color: "white"; opacity: 0.5     anchors.fill: parent; radius: calcsize.getw(8)     layer.enabled: true     layer.effect: dropshadow {     id: shadowef         anchors.fill: rec1         source: rec1         horizontaloffset: 3         verticaloffset: 3         radius: 15         samples: 16         color: "red"         transparentborder: true     } }

second attempt. maintains opacity of rec1 show border of sourcemaskef

dropshadow {     id: shadowef     anchors.fill: sourcemaskef     source: sourcemaskef     horizontaloffset: 3     verticaloffset: 3     radius: 15     samples: 16     color: "red"     transparentborder: true }  rectangle {     id: sourcemaskef; color: "transparent"     anchors.fill: rec1; radius: rec1.radius     border { width: offset; color: "white"; } }  opacitymask {     id: maskef     opacity: 1     anchors.fill: rec1     source: shadereffectsource {             sourceitem: shadowef             hidesource: false         }     masksource: shadereffectsource {             sourceitem: sourcemaskef             hidesource: false // if set true shadow hide         }     cached: true }  rectangle {     id: rec1; color: "white"; opacity: 0.5     anchors.fill: parent; radius: calcsize.getw(8) }

edit

well, after suggestion of bacarozzo, solution. closer i'm looking for:

component {     id: fondoitempromo     item {         id: item1; opacity: 0.5         layer.enabled: true; anchors.fill: parent         anchors.margins: calcsize.getw(5) //just test         rectangle {             id: rec1; color: "white"             anchors.fill: parent; radius: calcsize.getw(8)             item {                 id: item2; opacity: 0.5; layer.enabled: true                 anchors.fill: parent; clip: true                 rectangle {                     id: rec2; color: "white"                     anchors.fill: parent; radius: calcsize.getw(8)                     layer.enabled: true                 }                 dropshadow {                     anchors.fill: rec2                     source: rec2                     transparentborder: true                     horizontaloffset: 3                     verticaloffset: 3                     radius: 15                     samples: 16                     color: "black"; clip: true                 }             }         }     } }

however, shadow not extend beyond limits of element, can seen in corners:

.

any suggestions?

assuming shadow should semi-transparent - overall effect pretty ugly otherwise - can solve issue following approach:

import qtquick 2.4 import qtquick.window 2.2 import qtgraphicaleffects 1.0 import qtquick.controls.styles 1.3  applicationwindow {     width: 200     height: 300     visible: true     color: "steelblue"      item {         id: layered         opacity: 0.2         layer.enabled: true         anchors.fill: parent          rectangle {             id: rec1             width: 100             height: 100             anchors.centerin: parent             radius: 8         }          dropshadow {             id: drop             anchors.fill: rec1             source: rec1             horizontaloffset: 5             verticaloffset: 5             radius: 15             samples: 16             color: "red"             transparentborder: true         }     } }

here resulting rectangle barely visible w.r.t. background color and correct shadow applied:

enter image description here

edit

the effect can combined @ various level done in this example.

given edit, think have overcomplicated bit stuff here. example i've given above served way show opacity should work expected. given error have shown decided provide general solution should (hopefully) apply out of box.

the white rectangle acts container actual content. hence, should defined in different qml file. way can provide default property, i.e. define children items should positioned when added component. adding aliases able fine tune component, changing colors, shadow orientation , other graphical aspects. possible definition of component following:

// shadowedcomponent.qml      import qtquick 2.0 import qtgraphicaleffects 1.0  item {     opacity: 0.5     layer.enabled: true     clip: true     property alias color: rec.color     property alias dropcolor: drop.color     property alias voff: drop.verticaloffset     property alias hoff: drop.horizontaloffset     property alias radius: rec.radius     property alias dropradius: drop.radius     property alias samples: drop.samples     default property alias childrenz: rec.children //(1)      property int margins: 20   //(2)      rectangle {         id: rec         width: 100         height: 100         anchors.fill: parent         anchors.margins: margins         radius: 8         clip: true     }      dropshadow {         id: drop         anchors.fill: rec         source: rec         horizontaloffset: 5         verticaloffset: 5         radius: 15         samples: 16         color: "darkgray"         transparentborder: true     } }

the declaration in (1) crucial hinted in previous text: specify child of shadowedcomponent automagically child of inner rectangle positioning inside component (with desired alignement - see below). crucial property margins in (2): gives necessary gap shadow correctly appear. value equal 0 result in error shadow cannot exceed boundaries of item.

the component can used this:

shadowedcomponent {     color: "red"     dropcolor: "black"     voff: 3     hoff: 3     radius: 8     dropradius: 8     samples: 16      // inner content... }

or, since all properties have default value, this:

shadowedcomponent {      // inner content... }

finally possible usage example can following:

import qtquick 2.4 import qtquick.window 2.2 import qtquick.controls 1.3 import qtquick.layouts 1.1  applicationwindow {     width: 300     height: 600     visible: true      rectangle {         anchors.fill: parent         gradient:  gradient {             gradientstop { position: 0.0; color: "cyan" }             gradientstop { position: 0.5; color: "#0099ff" }             gradientstop { position: 1.0; color: "#6699ff" }         }          columnlayout {             anchors.fill: parent             anchors.margins: 10              shadowedcomponent {                 layout.fillheight: true                 layout.fillwidth: true                 voff: -5                 hoff: -10                  image {                     source: "http://avatarmaker.net/free-avatars/avatars/animals_216/cats_237/kitty_close_up_avatar_100x100_36619.jpg"                     anchors.fill: parent                     anchors.margins: 3                 }             }              shadowedcomponent {                 layout.fillheight: true                 layout.fillwidth: true                  dropcolor: "red"                 opacity: 0.7                  text {                     anchors.centerin: parent                     text: qstr("qml rocks!!!")                 }             }              shadowedcomponent {                 layout.fillheight: true                 layout.fillwidth: true                 voff: -5                 hoff: -10                  dropcolor: "red"                  busyindicator {                     anchors.centerin: parent                     running: true                 }             }              shadowedcomponent {                  layout.fillheight: true                  layout.fillwidth: true                  opacity: 0.6                    test {                     anchors.fill: parent                     opacity: 1                     margins: 10                      text {                         anchors.centerin: parent                         text: qstr("qml rocks!!!")                     }                 }             }         }     } }

using component defined in different file able compose it, declaratively, other (custom) component default property. overall result of our example following. note how each component unique in overall appearence numerous aliases defined, , used. note component can composed itself (by tuning margin w.r.t. given shadow parameters):

enter image description here


Comments

Post a Comment

Popular posts from this blog

c# - Store DBContext Log in other EF table -

-
i want store logs in db table (imported ef code). my code looks this: public pmcontext() : base("myentities") { configuration.proxycreationenabled = false; configuration.lazyloadingenabled = false; this.database.log = s => logstore(s); } private void logstore(string message) { tlog log = new tlog(); log.description = message; log.insertdate = datetime.now; logs.add(log); savechanges(); } public virtual dbset<tlog> logs { get; set; } i cannot use savechanges() (get error "sqlconnection not support parallel transactions") , if remove line nothing stored in db table. how can fix this? i think happens during savechanges call anywhere in app, because sql generated call logged, triggers nested savechanges call tries start own transaction. and there thing: savechanges call in logstore method trigger logging itself, you'd end starting infin...
Read more

c# - SetBinding not registering for PropertyChanged event -

-
in application i'm working on, programmatically create several frameworkelements differing data sources. unfortunately, data binding failing. i managed distill problem following program: using system.collections.generic; using system.componentmodel; using system.runtime.compilerservices; using windows.ui.xaml; using windows.ui.xaml.controls; using windows.ui.xaml.data; namespace testbinding { public class bindingsource : inotifypropertychanged { public event propertychangedeventhandler propertychanged; protected virtual void onpropertychanged(string propertyname) { propertychangedeventhandler handler = propertychanged; if (handler != null) handler(this, new propertychangedeventargs(propertyname)); } protected bool setfield<t>(ref t field, t value, [callermembername] string propertyname = null) { if (equalitycomparer<t>.default.equals(field, value)) return false; ...
Read more

python - Scrapy spider memory leak -

-
Image
my spider have serious memory leak.. after 15 min of run memory 5gb , scrapy tells (using prefs() ) there 900k requests objects , thats all. can reason high number of living requests objects? request goes , doesnt goes down. other objects close zero. my spider looks this: class externallinkspider(crawlspider): name = 'external_link_spider' allowed_domains = [''] start_urls = [''] rules = (rule(lxmllinkextractor(allow=()), callback='parse_obj', follow=true),) def parse_obj(self, response): if not isinstance(response, htmlresponse): return link in lxmllinkextractor(allow=(), deny=self.allowed_domains).extract_links(response): if not link.nofollow: yield linkcrawlitem(domain=link.url) here output of prefs() htmlresponse 2 oldest: 0s ago externallinkspider 1 oldest: 3285s ago linkcrawlitem 2 oldest: 0s ago request ...
Read more