@shijiu/jsview-vue 0.0.1-beta.0

package/samples/TextShadowDemo/App.vue

@@ -0,0 +1,98 @@
+<!--
+* 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
+-->
+<script>
+import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextStyleClass } from "jsview/utils/JsViewVueTools/JsvStyleClass";
+
+export default {
+  components: {
+    JsvTextBox,
+  },
+  data() {
+    return {
+      TextData: [
+        {
+          id: 0,
+          title: "偏移x,y为0(文字发光)",
+          textShadow: "0 0 3 #00FF00",
+        },
+        {
+          id: 1,
+          title: "blur为0(不显示阴影)",
+          textShadow: "2 2 0 #00FF00",
+        },
+        {
+          id: 2,
+          title: "rgba格式颜色(半透明红)",
+          textShadow: "4 4 3 rgba(255,0,0,0.5)",
+        },
+        {
+          id: 3,
+          title: "#格式颜色(蓝色)",
+          textShadow: "4 4 0.5 #0000EF",
+        },
+      ],
+      font_style: new JsvTextStyleClass({
+        fontSize: "35px",
+        textAlign: "center",
+        lineHeight: "40px",
+      }),
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      v-for="item in TextData"
+      :key="item.id"
+      :style="{ left: 320 * item.id }"
+    >
+      <div>
+        <div
+          :style="{
+            width: 320,
+            height: 50,
+            fontSize: '25px',
+            textAlign: 'center',
+            lineHeight: '50px',
+            backgroundColor: item.id % 2 == 0 ? '#00ff00' : '#0000ff',
+          }"
+        >
+          {{ item.title }}
+        </div>
+        <JsvTextBox
+          :verticalAlign="'middle'"
+          :styleToken="'Fixed'"
+          :stylesList="[
+            font_style,
+            {
+              top: 50,
+              width: 320,
+              height: 70,
+              textShadow: item.textShadow,
+              backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
+            },
+          ]"
+        >
+          文字阴影
+        </JsvTextBox>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/TextureSize/App.vue

@@ -0,0 +1,142 @@
+<script>
+import { Vue } from "vue-class-component";
+import jpegDemo from "./jpegDemo.jpeg";
+import pngDemo from "./pngDemo.png";
+import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
+import bmpDemo from "./bmpDemo.bmp";
+
+class App extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.jpegDemo = jpegDemo;
+    this.pngDemo = pngDemo;
+    this.pngNoAlphaDemo = pngNoAlphaDemo;
+    this.bmpDemo = bmpDemo;
+  }
+
+  onKeyDown(ev) {
+    // 8:Backspace, 27:Escape, 10000:盒子返回键
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      if (window.JsView) {
+        window.JsView.setGlobalConfig({
+          texCache: -1,
+        });
+      }
+
+      this.$router?.go(-1); // 有router时，回退
+      return true;
+    }
+    return false;
+  }
+}
+export default App;
+</script>
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="allBgc">
+      <div class="block">
+        <div :style="{ left: 0, top: 0 }">
+          <div class="leftFont top0">
+            {{ `原图加载\n内存占用由图片尺寸决定` }}
+          </div>
+          <div class="leftFont top250">
+            {{
+              `指定尺寸加载\n内存占用由给定尺寸决定，图片质量下降，但更省内存`
+            }}
+          </div>
+        </div>
+
+        <div :style="{ left: 220, top: 0 }">
+          <img alt="" class="graphSize top0" :src="bmpDemo" />
+          <img
+            alt=""
+            class="graphSize top250"
+            jsvImgScaledownTex
+            :src="bmpDemo"
+          />
+          <div class="underFont">
+            {{ `bmp图片\n指定尺寸噪点明显更大` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 440, top: 0 }">
+          <img alt="" class="graphSize top0" :src="jpegDemo" />
+          <img
+            alt=""
+            class="graphSize top250"
+            jsvImgScaledownTex
+            :src="jpegDemo"
+          />
+          <div class="underFont">
+            {{ "jpg/jpeg图片" }}
+          </div>
+        </div>
+
+        <div :style="{ left: 660, top: 0 }">
+          <img alt="" class="graphSize top0" :src="pngDemo" />
+          <img
+            alt=""
+            class="graphSize top250"
+            jsvImgScaledownTex
+            :src="pngDemo"
+          />
+          <div class="underFont">
+            {{ `png有透明图片\n指定尺寸有明显锯齿` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 880, top: 0 }">
+          <img alt="" class="graphSize top0" :src="pngNoAlphaDemo" />
+          <img
+            alt=""
+            class="graphSize top250"
+            jsvImgScaledownTex
+            :src="pngNoAlphaDemo"
+          />
+          <div class="underFont">
+            {{ `png无透明图片` }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+<style scoped>
+.allBgc {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+.block {
+  left: 20;
+  top: 50;
+}
+.leftFont {
+  left: 0;
+  width: 210;
+  height: 200;
+  color: #ffffff;
+  font-size: 30px;
+}
+.top0 {
+  top: 0;
+}
+.top250 {
+  top: 250;
+}
+.graphSize {
+  left: 0;
+  width: 200;
+  height: 200;
+  border-radius: 15px 15px 15px 15px;
+}
+.underFont {
+  left: 0;
+  top: 500;
+  width: 200;
+  height: 200;
+  color: #ffffff;
+  font-size: 20px;
+}
+</style>

package/samples/ThrowMoveDemo/AccelerateDemo.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:25
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-21 14:51:53
+ * @Description: file content
+-->
+<script>
+import JsvActorMove, {
+  JsvActorMoveControl,
+} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+export default {
+  components: {
+    JsvActorMove,
+  },
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      direction: 1,
+    };
+  },
+  computed: {
+    directionDetail() {
+      return this.direction > 0 ? "上" : "下";
+    },
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode === 13) {
+        let preDirection = this.direction;
+        this.direction = -this.direction;
+        this.throwControl.throwAlongY(
+          0,
+          750 * preDirection,
+          {
+            type: "catch",
+            position: 200 * preDirection,
+            direction: preDirection,
+          },
+          (x, y) => {
+            console.log(`Throw end with x=${x} y=${y}`);
+          }
+        );
+        return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      key="sample1"
+      class="detail-font"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      {{ `向${directionDetail}加速` }}
+    </div>
+    <div
+      key="DirectText"
+      class="font"
+      :style="{ top: 250, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${directionDetail}` }}
+    </div>
+    <div :style="{ top: 590, left: 625 }">
+      <jsv-actor-move key="move" :control="moveControl">
+        <jsv-actor-move key="throw" :control="throwControl">
+          <div
+            :style="{ backgroundColor: '#FF0000', width: 30, height: 30 }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.font {
+  font-size: 32px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.detail-font {
+  font-size: 32px;
+  color: #f7f7eb;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>

package/samples/ThrowMoveDemo/App.vue

@@ -0,0 +1,114 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:08
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-25 09:38:21
+ * @Description: file content
+-->
+<script>
+import LRParabolicDemo from "./LRParabolicDemo.vue";
+import UDParabolicDemo from "./UDParabolicDemo.vue";
+import TargetDemo from "./TargetDemo.vue";
+import AccelerateDemo from "./AccelerateDemo.vue";
+
+export default {
+  components: {
+    LRParabolicDemo,
+    UDParabolicDemo,
+    TargetDemo,
+    AccelerateDemo,
+  },
+  data() {
+    return {
+      demoIndex: 0,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        return true;
+      }
+      if (ev.keyCode === 37) {
+        this.demoIndex = this.demoIndex - 1 < 0 ? 3 : this.demoIndex - 1;
+      } else if (ev.keyCode === 39) {
+        this.demoIndex = this.demoIndex - +1 > 3 ? 0 : this.demoIndex + 1;
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#000000',
+    }"
+  >
+    <div
+      key="leftWall"
+      :style="{
+        top: 0,
+        left: 425,
+        width: 5,
+        height: 620,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="rightWall"
+      :style="{
+        top: 0,
+        left: 850,
+        width: 5,
+        height: 620,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="bottomWall"
+      :style="{
+        top: 620,
+        left: 425,
+        width: 430,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="GuidText1"
+      className="{CssStyles.FontStyle.getName()}"
+      :style="{ top: 625, left: (1280 - 430) / 2, width: 430, height: 40 }"
+    >
+      {`按OK键进行跳跃和转向`}
+    </div>
+    <div
+      key="GuidText2"
+      className="{CssStyles.FontStyle.getName()}"
+      :style="{ top: 625 + 40, left: (1280 - 430) / 2, width: 430, height: 40 }"
+    >
+      {`左右键切换不同模式的Demo`}
+    </div>
+    <jsv-focus-block
+      autoFocus
+      ref="focusNode"
+      :onAction="{
+        onKeyDown: onKeyDown,
+      }"
+    >
+      <LRParabolicDemo
+        v-if="demoIndex === 0"
+        name="/actorMove"
+      ></LRParabolicDemo>
+      <UDParabolicDemo v-if="demoIndex === 1" name="/udDemo"></UDParabolicDemo>
+      <TargetDemo v-if="demoIndex === 2" name="/targetDemo"></TargetDemo>
+      <AccelerateDemo
+        v-if="demoIndex === 3"
+        name="/accelerateDemo"
+      ></AccelerateDemo>
+    </jsv-focus-block>
+  </div>
+</template>

package/samples/ThrowMoveDemo/LRParabolicDemo.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:25
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-21 14:01:59
+ * @Description: file content
+-->
+<script>
+import JsvActorMove, {
+  JsvActorMoveControl,
+} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+export default {
+  components: {
+    JsvActorMove,
+  },
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      direction: 1,
+    };
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 13:
+          this.direction = -this.direction;
+
+          this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
+            console.log(`Move end with x=${x} y=${y}`);
+          });
+          this.throwControl.throwAlongY(
+            -500,
+            750,
+            { type: "catch", position: 0, direction: 1 },
+            (x, y) => {
+              console.log(`Throw end with x=${x} y=${y}`);
+            },
+            () => {
+              console.log("Get to the pole...");
+            }
+          );
+          return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      key="sample1"
+      class="detail-font"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      抛物线运动
+    </div>
+    <div
+      key="DirectText"
+      class="font"
+      :style="{ top: 250, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
+    </div>
+    <div :style="{ top: 590, left: 625 }">
+      <jsv-actor-move key="move" :control="moveControl">
+        <jsv-actor-move key="throw" :control="throwControl">
+          <div
+            :style="{ backgroundColor: '#00FF00', width: 30, height: 30 }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.font {
+  font-size: 32px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.detail-font {
+  font-size: 32px;
+  color: #f7f7eb;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>

package/samples/ThrowMoveDemo/TargetDemo.vue

@@ -0,0 +1,117 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:25
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-21 14:40:47
+ * @Description: file content
+-->
+<script>
+import JsvActorMove, {
+  JsvActorMoveControl,
+} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+export default {
+  components: {
+    JsvActorMove,
+  },
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      direction: 1,
+    };
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode === 13) {
+        let preDirection = this.direction;
+        this.direction = -this.direction;
+        this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
+          console.log(`Move end with x=${x} y=${y}`);
+        });
+        const position = (-100 * preDirection) / 2;
+        this.throwControl.throwAlongY(
+          -500 * preDirection,
+          750 * preDirection,
+          {
+            type: "catch",
+            position,
+            direction: -1 * preDirection,
+          },
+          (x, y) => {
+            console.log(`Throw end with x=${x} y=${y}`);
+          }
+        );
+        return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      key="sample1"
+      class="detail-font"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      拐点前触碰目标点
+    </div>
+    <div
+      key="DirectText"
+      class="font"
+      :style="{ top: 250, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
+    </div>
+    <div :style="{ top: 590, left: 625 }">
+      <jsv-actor-move key="move" :control="moveControl">
+        <jsv-actor-move key="throw" :control="throwControl">
+          <div
+            :style="{ backgroundColor: '#0916ff', width: 30, height: 30 }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.font {
+  font-size: 32px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.detail-font {
+  font-size: 32px;
+  color: #f7f7eb;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>