Introduce shadow effect on shapes.
--- 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;
}