@shijiu/jsview-vue 0.9.359-alpha.0 → 0.9.422

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -5,9 +5,13 @@
  *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
  *          imageUrl    {String}    (必填)显示图片的加载地址
  *          imageWidth  {int}       (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
- *          contentWidth {int}      (必填)原图信息: 原图内用来装内容区域的宽度(由于正方形,宽高相同)
- *          borderOutset {int}      在目标显示中，边框的显示宽度，默认值为0(由于正方形,宽高相同)，
- *                                  边框显示在目标区域的外缘，而非内缘
+ *          contentWidth {int}      (废弃)此值为了兼容，会赋值给centerWidth
+ *          centerWidth  {int}      (必填)原图信息: .9图的中心区域宽度(repeat区域)
+ *          imageDspWidth  {int}    原图缩放后的显示宽度，计算方法: 
+ *                                四角为90度圆弧时: imageDspWidth = 显示图形的圆弧半径 / 原图中圆弧的半径 * 原图宽度
+ *                                                原图中圆弧半径 = (原图宽度 - borderOutset * 2) / 2
+ *                                四角为其他形状时，原图.9图的四角区域，缩放到要和显示图形重合后的宽度。
+ *          borderOutset {int}      (必填)原图信息: 图片边缘到中心内容区域的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
  *          animTime    {int}       (必填)缩放动画的时长(单位毫秒)
  *          waitForInit {boolean}  尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
 -->
@@ -24,12 +28,14 @@ export default {
     },
     top: { type: Number, default: 0 },
     left: { type: Number, default: 0 },
-    borderOutset: { type: Number, default: 0 },
     waitForInit: { type: Boolean, default: true },
 
-    imageUrl: String,
-    imageWidth: Number,
-    contentWidth: Number,
+    imageUrl: { type:String, required: true },
+    imageWidth: { type:Number, required: true },
+    imageDspWidth: { type:Number, default:0 },
+    contentWidth: { type:Number, default: -1},
+    centerWidth: { type:Number, default: -1, required: true },
+    borderOutset: { type:Number, required: true },
     animTime: Number,
   },
 
@@ -52,8 +58,20 @@ export default {
   },
 
   data() {
+    let center_width = (this.contentWidth >= 0 ? this.contentWidth : 0); // 兼容处理，contentWidth变更为centerWidth
+    if (this.centerWidth >= 0) {
+      center_width = this.centerWidth;
+    }
+
+    // slice_width 获取
+    let slice_width = Math.ceil(Math.max(0, (this.imageWidth - center_width) / 2));
+
+    let image_dsp_width = this.imageDspWidth > 0 ? this.imageDspWidth : this.imageWidth;
+
     return {
-      sliceWidth: Math.ceil((this.imageWidth - this.contentWidth) / 2),
+      sliceWidth: slice_width,
+      borderDspWidth: Math.ceil(slice_width * image_dsp_width / this.imageWidth), // 跟进图片的缩放信息
+      convertedBorderOutset: Math.ceil(this.borderOutset * image_dsp_width / this.imageWidth),
     };
   },
 };
@@ -66,8 +84,8 @@ export default {
       ...style,
       transition: getTransition(),
       borderImage: `url(${imageUrl}) ${sliceWidth} fill`,
-      borderImageWidth: `${sliceWidth}px`,
-      borderImageOutset: `${borderOutset}px`,
+      borderImageWidth: `${borderDspWidth}px`,
+      borderImageOutset: `${convertedBorderOutset}px`,
     }"
   />
 </template>

package/samples/Basic/components/TitleBar.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 0}">div标签1</div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 1}">div标签2</div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 2}">div文本</div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 3}">动画</div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    itemSides: Object
-  }
-}
-</script>
-
-<style>
-@import "./FontStyle.css";
-</style>
-
-<style scoped>
-.item-style {
-  text-align: center;
-}
-
-</style>