Geek Answers Handbook

KineticJS: Shadow without shape?

In KinectJS , how do you create a shadow (that is, a translucent shape with blurry edges) without drawing a shape that “casts” it?

At first, I thought that you could just let the shape cast a shadow, but set the opacity of the shape to zero. For instance:

var rect = new Kinetic.Rect({ width: 100, height: 100, opacity: 0, shadowEnabled: true, shadowBlur: 10, shadowOpacity: 0.6 });

However, this does not work, because it seems that the final shadowOpacity is multiplied by the value of the native opacity of the form. Therefore, if opacity op == 0, then final shadowOpacity = 0.6 * 0 == 0. This means that the shadow also becomes invisible.

Do you have any ideas on how to achieve the desired effect?

+4
source share
4 answers

I don’t think you can have a shadow without a shape unless you create your usual shape with blurry touches. You can hide the main shape beyond visibility, as shown below. I do not recommend this for many forms.

  <div id="container"></div> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script> <script> var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ x: -120, y: -90, width: 100, height: 50, fill: 'blue', stroke: 'black', strokeWidth: 1, shadowColor: 'black', shadowBlur: 10, shadowOffset: 150, shadowOpacity: 0.5 }); layer.add(rect); stage.add(layer); </script>
+3
source

You need a Blur filter. It will be released in version 4.3.4 later this month (March 2013). Shadows are not a good mechanism for creating blurry edges due to the w3c specification.

+1
source

I remember how this was done, changing the kinetics framework to create transparent buttons with shadows. I modified the specific form methods to ensure filling in the opposite direction. Whenever you fill the opposite direction, it removes that shape from any other shapes in the same fill.

0
source

More articles:


All Articles