{"id":30922,"date":"2024-11-25T12:08:56","date_gmt":"2024-11-25T04:08:56","guid":{"rendered":"https:\/\/fwq.ai\/blog\/30922\/"},"modified":"2024-11-25T12:08:56","modified_gmt":"2024-11-25T04:08:56","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e4%b8%ad%e5%85%b3%e4%ba%8emovable-view%e7%a7%bb%e5%8a%a8%e5%9b%be%e7%89%87%e4%b8%8e%e5%8f%8c%e6%8c%87%e7%bc%a9%e6%94%be%e7%9a%84%e5%ae%9e%e4%be%8b","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/30922\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u5173\u4e8emovable-view\u79fb\u52a8\u56fe\u7247\u4e0e\u53cc\u6307\u7f29\u653e\u7684\u5b9e\u4f8b\u8be6\u89e3"},"content":{"rendered":"

movable-area\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u65b0\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7528\u6765\u79fb\u52a8\u89c6\u56fe\u533a\u57dfmovable-view\u3002\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8fmovable view\u79fb\u52a8\u56fe\u7247\u548c\u53cc\u6307\u7f29\u653e\u5b9e\u4f8b\u4ee3\u7801,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b<\/p>\n

movable-area\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u65b0\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7528\u6765\u79fb\u52a8\u89c6\u56fe\u533a\u57dfmovable-view\u3002\u79fb\u52a8\u65b9\u5411\u53ef\u9009\u62e9\u4efb\u4f55\u3001\u5782\u76f4\u548c\u5e73\u884c\u3002\u53ef\u79fb\u52a8\u533a\u57df\u91cc\u5305\u542b\u5176\u4ed6\u6587\u672c\u3001\u56fe\u7247\u3001\u6309\u94ae\u7b49\u7ec4\u4ef6\u3002\u53ef\u79fb\u52a8\u533a\u57df\u53ef\u7ed1\u5b9atouchend\u7b49\u4e8b\u4ef6\u3002movable-view\u7684\u53c2\u6570\u53ef\u8c03\u6574\u52a8\u753b\u6548\u679c\u3002<\/p>\n

\u5148\u4ecemovable-view\u5f00\u59cb\u8bf4\u8d77\u5427. movable-view\u662f\u5c0f\u7a0b\u5e8f\u81ea\u5b9a\u4e49\u7684\u7ec4\u4ef6.\u5176\u63cf\u8ff0\u4e3a:”\u53ef\u79fb\u52a8\u7684\u89c6\u56fe\u5bb9\u5668\uff0c\u5728\u9875\u9762\u4e2d\u53ef\u4ee5\u62d6\u62fd\u6ed1\u52a8”. <\/p>\n

\u503c\u5f97\u6ce8\u610f\u7684\u662f\u6587\u6863\u4e2d\u6709\u4e00\u6bb5\u5907\u6ce8: “\u5f53movable-view\u5c0f\u4e8emovable-area\u65f6\uff0cmovable-view\u7684\u79fb\u52a8\u8303\u56f4\u662f\u5728movable-area\u5185\uff1b\u5f53movable-view\u5927\u4e8emovable-area\u65f6\uff0cmovable-view\u7684\u79fb\u52a8\u8303\u56f4\u5fc5\u987b\u5305\u542bmovable-area\uff08x\u8f74\u65b9\u5411\u548cy\u8f74\u65b9\u5411\u5206\u5f00\u8003\u8651\uff09”. \u4e5f\u5c31\u662f\u8bf4\u7236\u5bb9\u5668movable-area\u662f\u53ef\u4ee5\u6bd4\u5b50\u5bb9\u5668movable-view\u5c0f\u7684,\u4f46\u662f\u5b50\u5bb9\u5668\u7684\u79fb\u52a8\u8303\u56f4\u5fc5\u987b\u5305\u62ec\u7236\u5bb9\u5668.<\/p>\n

\u5148\u770b\u5b98\u65b9\u5b9e\u4f8b\u4ee3\u7801:<\/p>\n

<\/p>\n

<view>\r\n <view>movable-view\u533a\u57df\u5c0f\u4e8emovable-area<\/view>\r\n <movable-area>\r\n <movable-view>\r\n <\/movable-view>\r\n <\/movable-area>\r\n <view>\r\n <button>click me to move to (30px, 30px)<\/button>\r\n <\/view>\r\n <view>movable-view\u533a\u57df\u5927\u4e8emovable-area<\/view>\r\n <movable-area>\r\n <movable-view>\r\n <\/movable-view>\r\n <\/movable-area><\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u8fd9\u91cc\u9762\u6709\u4e2a\u9519\u8bef,\u5e94\u8be5\u662f\u7f16\u5199\u4eba\u7684\u4e00\u70b9\u5c0f\u5931\u8bef\u5427. \u7b2c\u4e8c\u4e2amovable-area\u7684\u5c5e\u6027direction\u5e94\u8be5\u5199\u5728movable-view\u4e0a.<\/p>\n
<\/p>\n
 <movable-area>\r\n  <movable-view>\r\n  <\/movable-view>\r\n <\/movable-area><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u770b\u4e0b\u6548\u679c:<\/p>\n
1) \u5f53movable-view\u533a\u57df\u5c0f\u4e8emovable-area\u65f6,\u5b50\u5bb9\u5668movable-view\u53ea\u80fd\u5728\u7236\u5bb9\u5668\u5185\u79fb\u52a8.  \u4e0b\u56fe\u7684\u6548\u679c\u662f\u8bbe\u7f6e\u4e86\u5c5e\u6027 out-of-bounds=”true”\u7684\u6548\u679c. out-of-bounds\u53ef\u4ee5\u67d3\u5b50\u5bb9\u5668\u5230\u8fbe\u7236\u5bb9\u5668\u8fb9\u754c\u65f6\u6709\u4e2a\u8d85\u51fa\u8fb9\u754c\u7136\u540e\u56de\u5f39\u7684\u52a8\u753b. \u5e76\u4e0d\u662f\u771f\u6b63\u80fd\u8ba9\u5b50\u5bb9\u5668\u79fb\u52a8\u5230\u7236\u5bb9\u5668\u4ee5\u5916.<\/p>\n
2) \u5f53movable-view\u533a\u57df\u5927\u4e8emovable-area\u65f6,\u5b50\u5bb9\u5668\u79fb\u52a8\u7684\u8303\u56f4\u5fc5\u987b\u5305\u62ec\u7236\u5bb9\u5668.                    <\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u5173\u4e8emovable-view\u79fb\u52a8\u56fe\u7247\u4e0e\u53cc\u6307\u7f29\u653e\u7684\u5b9e\u4f8b\u8be6\u89e3\u63d2\u56fe\" <\/span><\/span>\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u5173\u4e8emovable-view\u79fb\u52a8\u56fe\u7247\u4e0e\u53cc\u6307\u7f29\u653e\u7684\u5b9e\u4f8b\u8be6\u89e3\u63d2\u56fe1\"                              <\/p>\n
\u7b2c\u4e8c\u79cd\u60c5\u51b5\u4e2d,\u628a\u7236\u5bb9\u5668\u770b\u505a\u624b\u673a\u5c4f\u5e55\u53ef\u89c6\u533a\u57df,\u5b50\u5bb9\u5668\u770b\u505a\u8981\u67e5\u770b\u7684\u957f\u56fe,\u5927\u56fe. \u5c31\u53ef\u4ee5\u5b9e\u73b0\u62d6\u52a8\u67e5\u770b\u56fe\u7247\u7684\u6548\u679c. \u5982\u679c\u56fe\u7247\u65f6\u52a8\u6001\u52a0\u8f7d\u7684,\u4e0d\u662f\u56fa\u5b9a\u7684\u56fe\u7247,\u5c31\u8981\u517c\u5bb9\u56fe\u7247\u5bbd\u9ad8\u5c0f\u4e8e\u5c4f\u5e55\u53ef\u89c6\u5bbd\u9ad8\u548c\u56fe\u7247\u5bbd\u9ad8\u5927\u4e8e\u53ef\u89c6\u5c4f\u5e55\u5bbd\u9ad8\u7684\u53ef\u80fd\u6027,\u4e5f\u5c31\u662f\u8981\u8003\u8651\u5230\u4ee5\u4e0a\u4e24\u79cd\u60c5\u51b5.<\/p>\n
\u6211\u4eec\u8981\u5728movable\u7ec4\u4ef6\u52a0\u8f7d\u7684\u540c\u65f6\u8bbe\u7f6e\u597dmovable-view\u7684\u5bbd\u9ad8,\u56e0\u4e3amovable\u7ec4\u4ef6\u52a0\u8f7d\u6210\u529f\u540e\u518d\u53bb\u6539\u53d8movable-view\u7684\u5927\u5c0f,\u53ef\u79fb\u52a8\u533a\u57df\u662f\u4e0d\u4f1a\u53d8\u7684. \u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u9875\u9762\u4e2d\u8981\u67e5\u770b\u7684\u56fe\u7247\u7684onload\u4e8b\u4ef6\u4e2d\u83b7\u53d6\u56fe\u7247\u5bbd\u9ad8(\u76ee\u524d\u6211\u53ea\u53d1\u73b0bindload\u4e8b\u4ef6\u80fd\u83b7\u53d6\u5230\u56fe\u7247\u5bbd\u9ad8),\u7136\u540e\u5b58\u50a8\u8d77\u6765imgWidth\u548cimgHeight. \u5f53\u7528\u6237\u70b9\u51fb\u56fe\u7247\u65f6,\u5728bindtap\u4e8b\u4ef6\u4e2d\u8bbe\u7f6e\u597dmovable-view\u7684\u5bbd\u9ad8,\u540c\u65f6\u5c06movable-area\u7684\u5f39\u7a97wx;if\u8bbe\u7f6e\u4e3atrue.<\/p>\n
<\/p>\n
 <!-- \u8981\u67e5\u770b\u7684\u56fe\u7247\u5217\u8868 -->\r\n   <view>\r\n     <view>   \r\n     <image><\/image>   \r\n    <\/view>\r\n   <\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u56e0\u4e3a\u8981\u67e5\u770b\u7684\u662f\u4e00\u4e2a\u56fe\u7247\u5217\u8868, \u6211\u7528\u4e86\u4e00\u4e2a\u6570\u7ec4\u53bb\u5b58\u50a8\u6bcf\u4e2a\u56fe\u7247\u7684\u5bbd\u9ad8,\u7136\u540e\u901a\u8fc7\u56fe\u7247id\u6765\u5173\u8054<\/p>\n
<\/p>\n
\/**\r\n * \u52a0\u8f7d\u56fe\u7247\r\n *\/\r\n imageOnload:function(e){\r\n var id = e.currentTarget.id\r\n this.data.imgIdList[id] = {\r\n  width:e.detail.width,\r\n  height:e.detail.height\r\n }\r\n },\r\n \u6a21\u677f\u9875\u9762\r\n<!--components\/resizePicModal\/resizePicModal.wxml-->\r\n<template>\r\n <scroll-view> \r\n <view> \r\n  \u53d6\u6d88\u9884\u89c8\r\n <\/view>\r\n <movable-area>\r\n  <movable-view>\r\n  <image><\/image>\r\n  <\/movable-view>\r\n <\/movable-area> \r\n <\/scroll-view> \r\n <\/template>\r\n \/**\r\n * \u6253\u5f00\u5f39\u7a97\r\n *\/\r\n showResizeModal: function (e) {\r\n var src = e.currentTarget.dataset.src;\r\n var x = 0\r\n var y =0\r\n try {\r\n  var width = this.imgIdList[e.currentTarget.id].width; \/\/\u56fe\u7247\u539f\u5bbd\r\n  var height = this.imgIdList[e.currentTarget.id].height; \/\/\u56fe\u7247\u539f\u9ad8\r\n  \r\n  \/\/\u5c0f\u7a0b\u5e8f\u9ed8\u8ba4\u56fa\u5b9a\u5bbd320px,\u83b7\u53d6top\u548cleft\u503c,\u4f7f\u56fe\u7247\u5c45\u4e2d\u663e\u793a\r\n  height = height * (320 \/ width);\r\n  width = 320;\r\n\u3000\u3000\u3000\u3000\r\n  x = (app.windowWidth - width) \/ 2 \r\n  y = (app.windowHeight - height) \/ 2\r\n\r\n } catch (e) { }\r\n var img = {\r\n  x: x,\r\n  y: y,26  currentSrc: src,\r\n };\r\n this.setData({ img: img, isCheckDtl: true });\r\n \r\n },<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
  \u90e8\u5206CSS\u4ee3\u7801<\/p>\n
<\/p>\n
.backdrop{\r\n background: rgba(0, 0, 0, 1);\r\n width:100%;\r\n height: 100%;\r\n position: fixed;\r\n top:0;\r\n left:0;\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4ee5\u4e0a\u57fa\u672c\u4e0a\u53ef\u4ee5\u5b8c\u6210\u4e00\u4e2a\u70b9\u51fb\u67e5\u770b\u56fe\u7247\u7684\u9700\u6c42.<\/p>\n
\u7136\u800c\u5982\u679c\u518d\u652f\u6301\u53cc\u6307\u7f29\u653e\u7684\u8bdd,movable-view\u5b9e\u73b0\u4e0d\u4e86.\u6211\u6682\u6ca1\u60f3\u51fa\u6765\u600e\u4e48\u5b9e\u73b0,\u5982\u679c\u6709\u4eba\u77e5\u9053,\u5e0c\u671b\u80fd\u591f\u6307\u70b9\u8ff7\u6d25. \u4e3b\u8981\u539f\u56e0\u662f\u56e0\u4e3a\u8fd8\u662f\u6211\u4e0a\u6587\u63d0\u5230\u7684\u90a3\u53e5\u8bdd:”movable\u7ec4\u4ef6\u52a0\u8f7d\u6210\u529f\u540e\u518d\u53bb\u6539\u53d8movable-view\u7684\u5927\u5c0f,\u53ef\u79fb\u52a8\u533a\u57df\u662f\u4e0d\u4f1a\u53d8\u7684”.\u7f29\u653e\u540e\u56fe\u7247\u5927\u5c0f\u80af\u5b9a\u4f1a\u6539\u53d8\u7684. \u7f29\u5c0f\u8fd8\u597d,\u4e00\u65e6\u653e\u5927,\u53ef\u79fb\u52a8\u533a\u57df\u8fd8\u662f\u539f\u6765\u7684\u4e0d\u4f1a\u6539\u53d8.\u60f3\u8c61\u4e00\u4e0b,\u5982\u679c\u4e00\u5f20\u5bbd\u5ea6\u521a\u521a\u597d\u65f6\u5c4f\u5e55\u53ef\u89c6\u5bbd\u5ea6\u7684\u56fe\u7247,\u653e\u5927\u540e,\u8fd9\u5f20\u56fe\u7247\u5c31\u53ea\u80fd\u5728\u5c4f\u5e55\u53ef\u89c6\u5bbd\u5ea6windowWidth\u7684\u8303\u56f4\u4e2d\u79fb\u52a8,\u770b\u4e0d\u5230\u5de6\u4e5f\u770b\u4e0d\u5230\u53f3\u8fb9\u8d85\u51fa\u7684\u90e8\u5206.<\/p>\n
\u6240\u4ee5\u5982\u679c\u65e2\u8981\u53ef\u79fb\u52a8\u56fe\u7247\u53c8\u8981\u53ef\u7f29\u653e,\u5c31\u4e0d\u80fd\u7528movable-view\u7ec4\u4ef6\u4e86,\u81ea\u5df1\u5199\u4e2a\u5427. \u539f\u6765bindtouchmove\u4f1a\u89e6\u53d1\u9875\u9762\u7684\u6eda\u52a8\u6761,\u4f46\u662f\u73b0\u5728\u5fae\u4fe1\u597d\u50cf\u5df2\u7ecf\u4fee\u590d\u4e86\u8fd9\u4e2aBUG,\u6211\u4eca\u5929\u5728\u771f\u673a\u4e0a\u6d4b\u8bd5\u6ca1\u6709\u51fa\u73b0\u8fd9\u4e2a\u95ee\u9898.<\/p>\n
 \u81ea\u5b9a\u4e49\u63a7\u4ef6resizePicModal.wxml:<\/p>\n
<\/p>\n
<!-- \u7f29\u653e -->\r\n<template>\r\n <scroll-view> \r\n <view> \r\n  \u53d6\u6d88\u9884\u89c8\r\n <\/view>\r\n  <image><\/image> \r\n <\/scroll-view> \r\n <\/template><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
 JS: resizePicModal.js<\/p>\n
<\/p>\n
 \/**\r\n * \u4f7f\u7528\u65b9\u6cd5:\r\n * 1) WXHTML\u8981\u7f29\u653e\u7684\u56fe\u7247 \u5fc5\u987b \u4f20\u5165 src \u4ee5\u53ca\u7ed1\u5b9a bindtap\u4e8b\u4ef6,\r\n * e.g:  \r\n * <image><\/image>\r\n * 2) WXHTML \u8981\u5f15\u5165Modal\u6a21\u677f(isCheckDtl\u65e0\u9700\u518d\u5b9a\u4e49):\r\n *  <view>\r\n *  <import><\/import>\r\n *  <template><\/template>\r\n *  <\/view>\r\n * 3) JS\u9875\u9762\u8981\u5f15\u5165JS\u6587\u4ef6,\u8986\u76d6\u5f53\u524d\u9875\u9762\u7684\u4e8b\u4ef6:\r\n * var resizePicModalService = require ('..\/..\/components\/resizePicModal\/resizePicModal.js')\r\n * var resizePicModal = {}\r\n * 4) \u5728onLoad\u4e8b\u4ef6\u4e2d,\u5b9e\u4f8b\u5316ResizePicModal\r\n *  resizePicModal = new resizePicModalService.ResizePicModal()\r\n *\/\r\nvar app = getApp()\r\nlet modalEvent = {\r\n distanceList: [0, 0],\/\/\u5b58\u50a8\u7f29\u653e\u65f6,\u53cc\u6307\u8ddd\u79bb.\u53ea\u6709\u4e24\u4e2a\u6570\u636e.\u7b2c\u4e00\u9879\u4e3aold distance.\u6700\u540e\u4e00\u9879\u4e3anew distance\r\n disPoint: { x: 0, y: 0 },\/\/\u624b\u6307touch\u56fe\u7247\u65f6,\u5728\u56fe\u7247\u4e0a\u7684\u4f4d\u7f6e\r\n imgIdList:{},\r\n \/**\r\n * \u6253\u5f00\u5f39\u7a97\r\n *\/\r\n showResizeModal: function (e) {\r\n var src = e.currentTarget.dataset.src;\r\n var x = 0\r\n var y =0\r\n try {\r\n  var width = this.imgIdList[e.currentTarget.id].width; \/\/\u56fe\u7247\u539f\u5bbd\r\n  var height = this.imgIdList[e.currentTarget.id].height; \/\/\u56fe\u7247\u539f\u9ad8\r\n  \/\/\u5c0f\u7a0b\u5e8f\u56fa\u5b9a\u5bbd320px\r\n  height = height * (320 \/ width);\r\n  width = 320;\r\n  x = (app.windowWidth - width) \/ 2 \/\/&gt; 0 ? (app.windowWidth - width) \/ 2 : 0;\r\n  y = (app.windowHeight - height) \/ 2\/\/ &gt; 0 ? (app.windowHeight - height) \/ 2 : 0;\r\n } catch (e) { }\r\n var img = {\r\n  top: y,\r\n  left: x,\r\n  x: x, y: y,\r\n  width: '100%',\r\n  baseScale: 1,\r\n  currentSrc: src,\r\n };\r\n this.setData({ img: img, isCheckDtl: true });\r\n },\r\n \/**\r\n * \u5173\u95ed\u5f39\u7a97\r\n *\/\r\n closeResizeModal:function(){\r\n this.setData({ isCheckDtl: false })\r\n },\r\n \/**\r\n * \u52a0\u8f7d\u56fe\u7247\r\n *\/\r\n imageOnload:function(e){\r\n var id = e.currentTarget.id\r\n this.imgIdList[id] = {\r\n  width:e.detail.width,\r\n  height:e.detail.height\r\n }\r\n },\r\n \/**\r\n * bindtouchmove\r\n *\/\r\n bindTouchMove: function (e) {\r\n if (e.touches.length == 1) {\/\/\u4e00\u6307\u79fb\u52a8\u5f53\u524d\u56fe\u7247\r\n  this.data.img.left = e.touches[0].clientX - this.disPoint.x\r\n  this.data.img.top = e.touches[0].clientY - this.disPoint.y\r\n  this.setData({ img: this.data.img })\r\n }\r\n if (e.touches.length == 2) {\/\/\u4e8c\u6307\u7f29\u653e\r\n  var xMove = e.touches[1].clientX - e.touches[0].clientX\r\n  var yMove = e.touches[1].clientY - e.touches[0].clientY\r\n  var distance = Math.sqrt(xMove * xMove + yMove * yMove);\/\/\u5f00\u6839\u53f7\r\n  this.distanceList.shift()\r\n  this.distanceList.push(distance)\r\n  if (this.distanceList[0] == 0) { return }\r\n  var distanceDiff = this.distanceList[1] - this.distanceList[0]\/\/\u4e24\u6b21touch\u4e4b\u95f4, distance\u7684\u53d8\u5316. &gt;0,\u653e\u5927\u56fe\u7247.0){\r\n  this.data.img.baseScale = baseScale\r\n  var imgWidth = baseScale * parseInt(this.data.img.imgWidth) \r\n  var imgHeight = baseScale * parseInt(this.data.img.imgHeight)\r\n  this.setData({ img: this.data.img })\r\n  }else{\r\n  this.data.img.baseScale = 0\r\n  this.setData({ img: this.data.img })\r\n  }\r\n }\r\n },\r\n \/**\r\n * bindtouchend\r\n *\/\r\n bindTouchEnd: function (e) {\r\n if (e.touches.length == 2) {\/\/\u4e8c\u6307\u7f29\u653e\r\n  this.setData({ isCheckDtl: true })\r\n }\r\n },\r\n \/**\r\n * bindtouchstart\r\n *\/\r\n bindTouchStart: function (e) {\r\n this.distanceList = [0, 0]\/\/\u56de\u590d\u521d\u59cb\u503c\r\n this.disPoint = { x: 0, y: 0 }\r\n if (e.touches.length == 1) {\r\n  this.disPoint.x = e.touches[0].clientX - this.data.img.left\r\n  this.disPoint.y = e.touches[0].clientY - this.data.img.top\r\n }\r\n }\r\n}\r\nfunction ResizePicModal(){\r\n let pages = getCurrentPages()\r\n let curPage = pages[pages.length - 1]\r\n Object.assign(curPage, modalEvent)\/\/\u8986\u76d6\u539f\u751f\u9875\u9762\u4e8b\u4ef6\r\n this.page = curPage\r\n curPage.resizePicModal = this\r\n return this\r\n}\r\nmodule.exports = {\r\n ResizePicModal\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e1a\u52a1\u9875\u9762wxml:\u5f15\u5165\u81ea\u5b9a\u4e49\u63a7\u4ef6\u6a21\u677f<\/p>\n
<\/p>\n
<view>\r\n    <view>   \r\n     <image><\/image>   \r\n    <\/view>\r\n <\/view><!-- \u7f29\u653e -->\r\n <view>\r\n <import><\/import>\r\n <template><\/template>\r\n <\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
 \u4e1a\u52a1\u9875\u9762js,\u5f15\u7528js\u6587\u4ef6,\u5b9e\u4f8b\u5316resizePicModal<\/p>\n
<\/p>\n
var that\r\n var resizePicModal = {}\r\n var app = getApp()\r\n var resizePicModalService = require('..\/..\/components\/resizePicModal\/resizePicModal.js')\r\n \/**\r\n  * \u751f\u547d\u5468\u671f\u51fd\u6570--\u76d1\u542c\u9875\u9762\u52a0\u8f7d\r\n  *\/\r\n onLoad: function (options) {\r\n  that = this 8  resizePicModal = new resizePicModalService.ResizePicModal()\r\n }<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u603b\u7ed3<\/strong><\/span><\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u5173\u4e8emovable-view\u79fb\u52a8\u56fe\u7247\u4e0e\u53cc\u6307\u7f29\u653e\u7684\u5b9e\u4f8b\u8be6\u89e3\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
movable-area\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u65b0\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7528\u6765\u79fb\u52a8\u89c6\u56fe\u533a\u57dfmovable-view\u3002\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8fmovable view\u79fb\u52a8\u56fe\u7247\u548c\u53cc\u6307\u7f29\u653e\u5b9e\u4f8b\u4ee3\u7801,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b movable-area\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u65b0\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7528\u6765\u79fb\u52a8\u89c6\u56fe\u533a\u57dfmovable-view\u3002\u79fb\u52a8\u65b9\u5411\u53ef\u9009\u62e9\u4efb\u4f55\u3001\u5782\u76f4\u548c\u5e73\u884c\u3002\u53ef\u79fb\u52a8\u533a\u57df\u91cc\u5305\u542b\u5176\u4ed6\u6587\u672c\u3001\u56fe\u7247\u3001\u6309\u94ae\u7b49\u7ec4\u4ef6\u3002\u53ef\u79fb\u52a8\u533a\u57df\u53ef\u7ed1\u5b9atouchend\u7b49\u4e8b\u4ef6\u3002movable-view\u7684\u53c2\u6570\u53ef\u8c03\u6574\u52a8\u753b\u6548\u679c\u3002 \u5148\u4ecemovable-view\u5f00\u59cb\u8bf4\u8d77\u5427. movable-view\u662f\u5c0f\u7a0b\u5e8f\u81ea\u5b9a\u4e49\u7684\u7ec4\u4ef6.\u5176\u63cf\u8ff0\u4e3a:”\u53ef\u79fb\u52a8\u7684\u89c6\u56fe\u5bb9\u5668\uff0c\u5728\u9875\u9762\u4e2d\u53ef\u4ee5\u62d6\u62fd\u6ed1\u52a8”.  \u503c\u5f97\u6ce8\u610f\u7684\u662f\u6587\u6863\u4e2d\u6709\u4e00\u6bb5\u5907\u6ce8: “\u5f53movable-view\u5c0f\u4e8emovable-area\u65f6\uff0cmovable-view\u7684\u79fb\u52a8\u8303\u56f4\u662f\u5728movable-area\u5185\uff1b\u5f53movable-view\u5927\u4e8emovable-area\u65f6\uff0cmovable-view\u7684\u79fb\u52a8\u8303\u56f4\u5fc5\u987b\u5305\u542bmovable-area\uff08x\u8f74\u65b9\u5411\u548cy\u8f74\u65b9\u5411\u5206\u5f00\u8003\u8651\uff09”. \u4e5f\u5c31\u662f\u8bf4\u7236\u5bb9\u5668movable-area\u662f\u53ef\u4ee5\u6bd4\u5b50\u5bb9\u5668movable-view\u5c0f\u7684,\u4f46\u662f\u5b50\u5bb9\u5668\u7684\u79fb\u52a8\u8303\u56f4\u5fc5\u987b\u5305\u62ec\u7236\u5bb9\u5668. \u5148\u770b\u5b98\u65b9\u5b9e\u4f8b\u4ee3\u7801: <view>  <view>movable-view\u533a\u57df\u5c0f\u4e8emovable-area<\/view>  <movable-area>  <movable-view>  <\/movable-view>  <\/movable-area>  <view>  <button>click me to move to (30px, 30px)<\/button>  <\/view>  <view>movable-view\u533a\u57df\u5927\u4e8emovable-area<\/view>  <movable-area>  <movable-view>  <\/movable-view>  <\/movable-area><\/view> \u767b\u5f55\u540e\u590d\u5236 \u8fd9\u91cc\u9762\u6709\u4e2a\u9519\u8bef,\u5e94\u8be5\u662f\u7f16\u5199\u4eba\u7684\u4e00\u70b9\u5c0f\u5931\u8bef\u5427. \u7b2c\u4e8c\u4e2amovable-area\u7684\u5c5e\u6027direction\u5e94\u8be5\u5199\u5728movable-view\u4e0a.  <movable-area>   <movable-view>   <\/movable-view>  <\/movable-area> \u767b\u5f55\u540e\u590d\u5236 \u770b\u4e0b\u6548\u679c: 1) \u5f53movable-view\u533a\u57df\u5c0f\u4e8emovable-area\u65f6,\u5b50\u5bb9\u5668movable-view\u53ea\u80fd\u5728\u7236\u5bb9\u5668\u5185\u79fb\u52a8.  \u4e0b\u56fe\u7684\u6548\u679c\u662f\u8bbe\u7f6e\u4e86\u5c5e\u6027 out-of-bounds=”true”\u7684\u6548\u679c. out-of-bounds\u53ef\u4ee5\u67d3\u5b50\u5bb9\u5668\u5230\u8fbe\u7236\u5bb9\u5668\u8fb9\u754c\u65f6\u6709\u4e2a\u8d85\u51fa\u8fb9\u754c\u7136\u540e\u56de\u5f39\u7684\u52a8\u753b. \u5e76\u4e0d\u662f\u771f\u6b63\u80fd\u8ba9\u5b50\u5bb9\u5668\u79fb\u52a8\u5230\u7236\u5bb9\u5668\u4ee5\u5916. 2) \u5f53movable-view\u533a\u57df\u5927\u4e8emovable-area\u65f6,\u5b50\u5bb9\u5668\u79fb\u52a8\u7684\u8303\u56f4\u5fc5\u987b\u5305\u62ec\u7236\u5bb9\u5668.                                                    \u7b2c\u4e8c\u79cd\u60c5\u51b5\u4e2d,\u628a\u7236\u5bb9\u5668\u770b\u505a\u624b\u673a\u5c4f\u5e55\u53ef\u89c6\u533a\u57df,\u5b50\u5bb9\u5668\u770b\u505a\u8981\u67e5\u770b\u7684\u957f\u56fe,\u5927\u56fe. \u5c31\u53ef\u4ee5\u5b9e\u73b0\u62d6\u52a8\u67e5\u770b\u56fe\u7247\u7684\u6548\u679c. \u5982\u679c\u56fe\u7247\u65f6\u52a8\u6001\u52a0\u8f7d\u7684,\u4e0d\u662f\u56fa\u5b9a\u7684\u56fe\u7247,\u5c31\u8981\u517c\u5bb9\u56fe\u7247\u5bbd\u9ad8\u5c0f\u4e8e\u5c4f\u5e55\u53ef\u89c6\u5bbd\u9ad8\u548c\u56fe\u7247\u5bbd\u9ad8\u5927\u4e8e\u53ef\u89c6\u5c4f\u5e55\u5bbd\u9ad8\u7684\u53ef\u80fd\u6027,\u4e5f\u5c31\u662f\u8981\u8003\u8651\u5230\u4ee5\u4e0a\u4e24\u79cd\u60c5\u51b5. \u6211\u4eec\u8981\u5728movable\u7ec4\u4ef6\u52a0\u8f7d\u7684\u540c\u65f6\u8bbe\u7f6e\u597dmovable-view\u7684\u5bbd\u9ad8,\u56e0\u4e3amovable\u7ec4\u4ef6\u52a0\u8f7d\u6210\u529f\u540e\u518d\u53bb\u6539\u53d8movable-view\u7684\u5927\u5c0f,\u53ef\u79fb\u52a8\u533a\u57df\u662f\u4e0d\u4f1a\u53d8\u7684. \u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u9875\u9762\u4e2d\u8981\u67e5\u770b\u7684\u56fe\u7247\u7684onload\u4e8b\u4ef6\u4e2d\u83b7\u53d6\u56fe\u7247\u5bbd\u9ad8(\u76ee\u524d\u6211\u53ea\u53d1\u73b0bindload\u4e8b\u4ef6\u80fd\u83b7\u53d6\u5230\u56fe\u7247\u5bbd\u9ad8),\u7136\u540e\u5b58\u50a8\u8d77\u6765imgWidth\u548cimgHeight. \u5f53\u7528\u6237\u70b9\u51fb\u56fe\u7247\u65f6,\u5728bindtap\u4e8b\u4ef6\u4e2d\u8bbe\u7f6e\u597dmovable-view\u7684\u5bbd\u9ad8,\u540c\u65f6\u5c06movable-area\u7684\u5f39\u7a97wx;if\u8bbe\u7f6e\u4e3atrue.  <!– \u8981\u67e5\u770b\u7684\u56fe\u7247\u5217\u8868 –>    <view>      <view>         <image><\/image>        <\/view>    <\/view> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-30922","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=30922"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30922\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=30922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=30922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=30922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}