@cloud-app-dev/vidc 3.2.36 → 3.2.37

package/es/Picture/demo.js

@@ -49,19 +49,19 @@ export default function App() {
         isOpenSelect: state.open,
         rects: [{
           type: 'face',
-          rect: [698, 274, 23, 23],
+          rect: [10, 20, 23, 23],
           needExpand: true
         }, {
           type: 'face',
-          rect: [754.0, 268.0, 23.0, 23.0],
+          rect: [20, 25, 23.0, 23.0],
           needExpand: true
         }, {
           type: 'face',
-          rect: [430.0, 421.0, 49.0, 49.0],
+          rect: [40, 20.0, 49.0, 49.0],
           needExpand: true
         }, {
           type: 'face',
-          rect: [240.0, 468.0, 41.0, 36.0],
+          rect: [35.0, 70.0, 41.0, 36.0],
           needExpand: true
         }],
         children: function children() {
@@ -105,7 +105,24 @@ export default function App() {
           },
           children: /*#__PURE__*/_jsx(Picture, {
             imagePath: "http://192.168.100.246:5463/oss/v1/100004008/objects/638da35805f5f0a8101021f9?client_token=100004008_0_1670313176_9a47a8459c120d977904c9feb2354a7e",
-            isOpenSelect: false
+            isOpenSelect: false,
+            rects: [{
+              type: 'face',
+              rect: [698, 274, 23, 23],
+              needExpand: true
+            }, {
+              type: 'face',
+              rect: [754.0, 268.0, 23.0, 23.0],
+              needExpand: true
+            }, {
+              type: 'face',
+              rect: [430.0, 421.0, 49.0, 49.0],
+              needExpand: true
+            }, {
+              type: 'face',
+              rect: [240.0, 468.0, 41.0, 36.0],
+              needExpand: true
+            }]
           })
         })
       })]

package/es/Picture/index.js

@@ -82,7 +82,8 @@ function Picture(_ref) {
     forceUpdateKey: Date.now(),
     fullScreenStatus: false,
     localUrl: '',
-    offset: [0, 0]
+    offset: [0, 0],
+    size: ['auto', 'auto']
   }),
       _useSimpleState2 = _slicedToArray(_useSimpleState, 3),
       state = _useSimpleState2[0],
@@ -122,7 +123,7 @@ function Picture(_ref) {
   var loadImageSuccess = _useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _layoutRef$current2, _layoutRect$width, _layoutRect$height;
 
-    var img, naturalWidth, naturalHeight, layoutRect, w, h, baseXOrY, x, y, imagescale, imgHeight, _imagescale, imgWidth, moveObj;
+    var img, naturalWidth, naturalHeight, layoutRect, w, h, baseXOrY, x, y, size, imagescale, imgHeight, _imagescale, imgWidth, moveObj;
 
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) {
@@ -144,17 +145,38 @@ function Picture(_ref) {
             baseXOrY = naturalWidth > naturalHeight ? 'x' : 'y';
             x = 0;
             y = 0;
+            size = []; // 横图
 
             if (baseXOrY === 'x') {
-              imagescale = w / naturalWidth;
-              imgHeight = imagescale * naturalHeight;
-              y = Math.abs((imgHeight - h) / 2);
-              img.width = w;
+              if (naturalWidth < w) {
+                // 图片小于容器
+                size[0] = naturalWidth;
+                size[1] = naturalHeight;
+                x = (w - naturalWidth) / 2;
+                y = Math.abs((h - naturalHeight) / 2);
+              } else {
+                // 图片大于容器
+                imagescale = w / naturalWidth;
+                imgHeight = imagescale * naturalHeight;
+                y = Math.abs((imgHeight - h) / 2);
+                size[0] = w;
+                size[1] = imgHeight;
+              }
             } else {
-              _imagescale = h / naturalHeight;
-              imgWidth = _imagescale * naturalWidth;
-              x = Math.abs((imgWidth - w) / 2);
-              img.height = h;
+              if (naturalHeight < h) {
+                // 图片小于容器
+                size[0] = naturalWidth;
+                size[1] = naturalHeight;
+                x = Math.abs(w - naturalWidth) / 2;
+                y = (h - naturalHeight) / 2;
+              } else {
+                // 图片大于容器
+                _imagescale = h / naturalHeight;
+                imgWidth = _imagescale * naturalWidth;
+                x = Math.abs((imgWidth - w) / 2);
+                size[0] = imgWidth;
+                size[1] = h;
+              }
             }
 
             moveObj = moveActionRef.current;
@@ -168,11 +190,12 @@ function Picture(_ref) {
                 y: y,
                 offset: [x, y],
                 forceUpdateKey: Date.now(),
-                baseXOrY: baseXOrY
+                baseXOrY: baseXOrY,
+                size: size
               });
             });
 
-          case 14:
+          case 15:
           case "end":
             return _context.stop();
         }
@@ -365,8 +388,8 @@ function Picture(_ref) {
             draggable: false,
             src: state.localUrl,
             style: {
-              width: state.baseXOrY === 'x' ? '100%' : 'auto',
-              height: state.baseXOrY === 'y' ? '100%' : 'auto'
+              width: state.size[0],
+              height: state.size[1]
             },
             "data-src": imagePath,
             onLoad: loadImageSuccess

package/es/Picture/utils.js

@@ -87,13 +87,13 @@ export function computedRectScale(_ref) {
     var rect = item.needExpand ? getCaptureRect(cloneDeep(item.rect), item.type) : cloneDeep(item.rect);
     rect[0] = Math.round(rect[0] * scaleOptions.scaleX);
     rect[0] < 0 && (rect[0] = 0);
-    rect[2] = Math.round(rect[2] * scaleOptions.scaleX);
-    rect[2] < 0 && (rect[2] = 0);
     rect[1] = Math.round(rect[1] * scaleOptions.scaleY);
     rect[1] < 0 && (rect[1] = 0);
+    rect[2] = Math.round(rect[2] * scaleOptions.scaleX);
+    rect[2] < 0 && (rect[2] = 0);
+    rect[2] > width - rect[0] && (rect[2] = width - rect[0]);
     rect[3] = Math.round(rect[3] * scaleOptions.scaleY);
     rect[3] < 0 && (rect[3] = 0);
-    rect[2] > width - rect[0] && (rect[2] = width - rect[0]);
     rect[3] > height - rect[1] && (rect[3] = height - rect[1]);
     return _objectSpread(_objectSpread({}, item), {}, {
       rect: rect

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.2.36",
+  "version": "3.2.37",
   "scripts": {
     "docs:deploy": "gh-pages -d docs-dist",
     "build": "npm run entry && father build",
@@ -66,7 +66,7 @@
     "@types/react-dom": "^18.0.6",
     "antd": "^4.22.6",
     "babel-plugin-import": "^1.13.5",
-    "dumi": "^2.0.10",
+    "dumi": "^2.0.11",
     "gh-pages": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",