Introduce shadow effect on shapes.
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 01 Mar 2017 16:39:43 +0100
changeset 408 159042869b47
parent 407 74e0a5ea614a
child 409 3e61d1c8acd3
Introduce shadow effect on shapes.
src_js/iconolab-bundle/src/components/editor/Canvas.vue
src_js/iconolab-bundle/src/components/editor/ShapeFree.vue
src_js/iconolab-bundle/src/components/editor/ShapeRect.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Mar 01 15:29:21 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Mar 01 16:39:43 2017 +0100
@@ -20,6 +20,13 @@
                     v-bind:paper="paper"
                     v-bind:original-annotation="annotation"
                     v-bind:readonly="readonly"></shape-free>
+                <defs>
+                    <filter id="shadow" width="200%" height="200%">
+                        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0"/>
+                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
+                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
+                    </filter>
+                </defs>
             </svg>
         </div>
         <div class="controls">
--- a/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Wed Mar 01 15:29:21 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Wed Mar 01 16:39:43 2017 +0100
@@ -1,8 +1,9 @@
 <template>
-    <g>
-        <path ref="path" v-bind:d="path" stroke="#000000" fill="#bdc3c7"
+    <g filter="url(#shadow)">
+        <path ref="path" v-bind:d="path"
+            class="path"
             v-bind:stroke-width="handlerRadius / 2"
-            v-bind:stroke-dasharray="(handlerRadius / 3) + ',' + (handlerRadius / 3)" style="opacity: 0.6;"></path>
+            filter="url(#shadow)"></path>
         <circle ref="handlers"
             v-for="(point, key) in points"
             :key="key"
@@ -192,6 +193,11 @@
     stroke: #000;
     opacity: 0.9;
 }
+.path {
+    stroke: #000;
+    fill: #fff;
+    opacity: 0.6;
+}
 .handler--first {
     fill: yellow;
 }
--- a/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Wed Mar 01 15:29:21 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Wed Mar 01 16:39:43 2017 +0100
@@ -1,11 +1,10 @@
 <template>
-<g ref="g" v-bind:transform="transform">
+<g ref="g" filter="url(#shadow)" v-bind:transform="transform">
     <rect
         ref="shape"
         x="0" y="0"
         v-bind:width="width" v-bind:height="height"
         v-bind:stroke-width="handlerSize / 5"
-        v-bind:stroke-dasharray="(handlerSize / 5) + ',' + (handlerSize / 5)"
         class="shape"
         v-bind:class="{ 'shape--draggable': !readonly }"></rect>
     <rect
@@ -208,7 +207,7 @@
 
 <style scoped>
 .shape {
-    fill: #bdc3c7;
+    fill: transparent;
     stroke: #000;
     opacity: 0.6;
 }