update 2024-03-14

konvajs · Mar 14, 2024 · 8bc121f · 8bc121f
1 parent 63ccb22
commit 8bc121f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/react-demos/custom_shape/src/index.js b/react-demos/custom_shape/src/index.js
@@ -9,12 +9,17 @@ class App extends Component {
       <Stage width={window.innerWidth} height={window.innerHeight}>
         <Layer>
           <Shape
-            sceneFunc={(context, shape) => {
+            width={260}
+            height={170}
+            sceneFunc={function (context, shape) {
+              const width = shape.width();
+              const height = shape.height();
               context.beginPath();
-              context.moveTo(20, 50);
-              context.lineTo(220, 80);
-              context.quadraticCurveTo(150, 100, 260, 170);
+              context.moveTo(0, 0);
+              context.lineTo(width - 40, height - 90);
+              context.quadraticCurveTo(width - 110, height - 70, width, height);
               context.closePath();
+
               // (!) Konva specific method, it is very important
               context.fillStrokeShape(shape);
             }}

diff --git a/source/downloads/code/shapes/Custom.html b/source/downloads/code/shapes/Custom.html
@@ -30,11 +30,15 @@
        * drawing function which draws a triangle
        */
       var triangle = new Konva.Shape({
+        width: 260,
+        height: 170,
         sceneFunc: function (context, shape) {
+          const width = shape.width();
+          const height = shape.height();
           context.beginPath();
-          context.moveTo(20, 50);
-          context.lineTo(220, 80);
-          context.quadraticCurveTo(150, 100, 260, 170);
+          context.moveTo(0, 0);
+          context.lineTo(width - 40, height - 90);
+          context.quadraticCurveTo(width - 110, height - 70, width, height);
           context.closePath();
 
           // (!) Konva specific method, it is very important

diff --git a/svelte-demos/custom_shape/src/App.svelte b/svelte-demos/custom_shape/src/App.svelte
@@ -6,14 +6,18 @@
     <Layer>
         <Shape
             config={{
+                width: 260,
+                height: 170,
                 sceneFunc: function (context, shape) {
+                    const width = shape.width();
+                    const height = shape.height();
                     context.beginPath();
-                    context.moveTo(20, 50);
-                    context.lineTo(220, 80);
-                    context.quadraticCurveTo(150, 100, 260, 170);
+                    context.moveTo(0, 0);
+                    context.lineTo(width - 40, height - 90);
+                    context.quadraticCurveTo(width - 110, height - 70, width, height);
                     context.closePath();
 
-                    // special Konva.js method
+                    // (!) Konva specific method, it is very important
                     context.fillStrokeShape(shape);
                 },
                 fill: "#00D2FF",

diff --git a/vue-demos/custom_shape/src/App.vue b/vue-demos/custom_shape/src/App.vue
@@ -2,14 +2,18 @@
     <v-stage ref="stage" :config="stageSize">
       <v-layer>
         <v-shape :config="{
-        sceneFunc: function(context, shape) {
+        width: 260,
+        height: 170,
+        sceneFunc: function (context, shape) {
+          const width = shape.width();
+          const height = shape.height();
           context.beginPath();
-          context.moveTo(20, 50);
-          context.lineTo(220, 80);
-          context.quadraticCurveTo(150, 100, 260, 170);
+          context.moveTo(0, 0);
+          context.lineTo(width - 40, height - 90);
+          context.quadraticCurveTo(width - 110, height - 70, width, height);
           context.closePath();
 
-          // special Konva.js method
+          // (!) Konva specific method, it is very important
           context.fillStrokeShape(shape);
         },
         fill: '#00D2FF',