@shijiu/jsview-vue-samples 2.1.428 → 2.1.448-test.0

package/TextureStoreTest/App.vue

@@ -7,12 +7,16 @@
         left: 200,
       }"
     >
-      <img :src="`jsvtexturestore://${sourceId}`" class="logo-size" :style="{
-        left:50,
-        top:50
-      }" />
+      <img
+        :src="`jsvtexturestore://${sourceId}`"
+        class="logo-size"
+        :style="{
+          left: 50,
+          top: 50,
+        }"
+      />
     </div>
-    <!-- 圆框点九 -->
+    <!-- 圆框点九-底色 -->
     <div
       class="logo-bg"
       :style="{
@@ -28,24 +32,24 @@
           backgroundColor: '#FF1213',
           top: 50,
         }"
-      >
-        <JsvNinePatch
-          :style="{
-            left: 0,
-            top: 0,
-            width: 200,
-            height: 200,
-          }"
-          :imageUrl="`jsvtexturestore://${sourceId2}`"
-          :imageWidth="136"
-          :centerWidth="1"
-          :imageDspWidth="136"
-          :borderOutset="8"
-          :animTime="0"
-        />
-      </div>
+      ></div>
     </div>
-    <!-- 方框点九 -->
+    <!-- 圆框点九-框 -->
+    <JsvNinePatch
+      :style="{
+        left: 750,
+        top: 50,
+        width: 200,
+        height: 200,
+      }"
+      :imageUrl="`jsvtexturestore://${sourceId2}`"
+      :imageWidth="136"
+      :centerWidth="1"
+      :imageDspWidth="136"
+      :borderOutset="8"
+      :animTime="0"
+    />
+    <!-- 方框点九-底色 -->
     <div class="logo-bg" :style="{ left: 200, top: 360 }">
       <div
         class="logo-size"
@@ -54,40 +58,81 @@
           backgroundColor: '#FF1213',
           top: 50,
         }"
-      >
-        <JsvNinePatch
-          :style="{
-            left: 0,
-            top: 0,
-            width: 200,
-            height: 200,
-          }"
-          :imageUrl="`jsvtexturestore://${sourceId3}`"
-          :imageWidth="136"
-          :centerWidth="1"
-          :imageDspWidth="136"
-          :borderOutset="6"
-          :animTime="0"
-        />
-      </div>
+      ></div>
+    </div>
+    <!-- 方框点九-框 -->
+    <JsvNinePatch
+      :style="{
+        left: 250,
+        top: 410,
+        width: 200,
+        height: 200,
+      }"
+      :imageUrl="`jsvtexturestore://${sourceId3}`"
+      :imageWidth="136"
+      :centerWidth="1"
+      :imageDspWidth="136"
+      :borderOutset="6"
+      :animTime="0"
+    />
+    <!-- 渐变点九-底色 -->
+    <div
+      class="logo-bg"
+      :style="{
+        left: 700,
+        top: 360,
+      }"
+    >
+      <div
+        class="logo-size"
+        :style="{
+          borderRadius: 60,
+          left: 50,
+          backgroundImage: `jsvtexturestore://${sourceId4}`,
+          top: 50,
+        }"
+      ></div>
     </div>
+    <!-- 渐变点九-框（同圆框点九框） -->
+    <JsvNinePatch
+      :style="{
+        left: 750,
+        top: 410,
+        width: 200,
+        height: 200,
+      }"
+      :imageUrl="`jsvtexturestore://${sourceId2}`"
+      :imageWidth="136"
+      :centerWidth="1"
+      :imageDspWidth="136"
+      :borderOutset="8"
+      :animTime="0"
+    />
     <!-- 文字说明 -->
-    <div class="text" :style="{top:320,left:200}">{{ '半圆' }}</div>
-    <div class="text" :style="{top:320,left:700}">{{ '圆角NinePatch' }}</div>
-    <div class="text" :style="{top:680,left:200}">{{ '直角NinePatch' }}</div>
+    <div class="text" :style="{ top: 320, left: 200 }">{{ "半圆" }}</div>
+    <div class="text" :style="{ top: 320, left: 700 }">
+      {{ "圆角NinePatch" }}
+    </div>
+    <div class="text" :style="{ top: 680, left: 200 }">
+      {{ "直角NinePatch" }}
+    </div>
+    <div class="text" :style="{ top: 680, left: 700 }">
+      {{ "渐变圆角NinePatch" }}
+    </div>
   </div>
 </template>
 
 <script setup>
-import JsvNinePatch from "@shijiu/jsview-vue/utils/JsViewVueWidget/JsvNinePatch.vue";
 import { shallowRef, onBeforeUnmount } from "vue";
-import { JsvTextureStoreApi } from "jsview";
+import { JsvTextureStoreApi, JsvNinePatch } from "jsview";
 let canvasRef;
 let canvasRef2;
 let canvasRef3;
+let canvasRef4;
 let sourceId = shallowRef("");
 let sourceId2 = shallowRef("");
 let sourceId3 = shallowRef("");
+let sourceId4 = shallowRef("");
 let bitmap = {
   width: 150,
   height: 150,
@@ -100,9 +145,14 @@ let bitmap3 = {
   width: 136,
   height: 136,
 };
+let bitmap4 = {
+  width: 136,
+  height: 136,
+};
 canvasRef = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
 canvasRef2 = JsvTextureStoreApi.canvasTexture(bitmap2.width, bitmap2.height);
 canvasRef3 = JsvTextureStoreApi.canvasTexture(bitmap3.width, bitmap3.height);
+canvasRef4 = JsvTextureStoreApi.canvasTexture(bitmap4.width, bitmap4.height);
 //第一个图
 let centerX = bitmap.width / 2;
 let centerY = bitmap.height / 2;
@@ -134,11 +184,26 @@ sourceId2.value = canvasRef2.commit();
 let customPath3 = canvasRef3.rectPath(3, 3, 133, 133);
 customPath3.stroke(6, "#87CEEB");
 sourceId3.value = canvasRef3.commit();
+//第四个图(底色即使用渐变色接口描绘)
+const multiColorSet = {
+  color: ["#ff0000", "#0000ff", "#00ff00", "#ff00ff"],
+  position: [0, 0.3, 0.8, 1],
+};
+canvasRef4.drawLinearGradientRect(
+  0,
+  0,
+  0,
+  136,
+  multiColorSet.color,
+  multiColorSet.position
+);
+sourceId4.value = canvasRef4.commit();
 
 onBeforeUnmount(() => {
   JsvTextureStoreApi.deleteTexture(sourceId.value);
   JsvTextureStoreApi.deleteTexture(sourceId2.value);
   JsvTextureStoreApi.deleteTexture(sourceId3.value);
+  JsvTextureStoreApi.deleteTexture(sourceId4.value);
 });
 </script>
 
@@ -157,12 +222,12 @@ onBeforeUnmount(() => {
   height: 300;
   background-color: #007f00;
 }
-.text{
-  width:300;
-  height:30;
+.text {
+  width: 300;
+  height: 30;
   font-size: 28;
   line-height: 30;
-  color: #FFFFFF;
+  color: #ffffff;
   text-align: center;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.428",
+  "version": "2.1.448-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/SceneTransition/images/mask-025/config.json

@@ -1,29 +0,0 @@
-{
-  "style": "Irregular",
-  "type":"Regular",
-  "age": [3, 4],
-  "level": 1,
-  "grade": "Easy",
-  "components": [
-    {
-      "key": "1",
-      "x": 0,
-      "y": 0
-    },
-    {
-      "key": "2",
-      "x": 227,
-      "y": 0
-    },
-    {
-      "key": "3",
-      "x": 0,
-      "y": 327
-    },
-    {
-      "key": "4",
-      "x": 327,
-      "y": 227
-    }
-  ]
-}