From 53dd13d81f0e04bd98b6cb43fde443b96064c78e Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Tue, 30 Jun 2020 22:09:18 +0800 Subject: [PATCH] Image zoom --- package.json | 1 + src/components/app/PartMore.js | 150 +++++++++++++++++++------------- src/containers/app/ImageZoom.js | 13 +++ yarn.lock | 5 ++ 4 files changed, 107 insertions(+), 62 deletions(-) create mode 100644 src/containers/app/ImageZoom.js diff --git a/package.json b/package.json index 0422ad4..79b0e86 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "jsqr": "^1.3.1", + "medium-zoom": "^1.0.5", "prop-types": "^15.7.2", "react": "^16.13.1", "react-color": "^2.18.1", diff --git a/src/components/app/PartMore.js b/src/components/app/PartMore.js index 5c70cd0..1ae41df 100644 --- a/src/components/app/PartMore.js +++ b/src/components/app/PartMore.js @@ -1,80 +1,106 @@ import React from 'react'; import './App.css'; -import LinkButton from "../link/LinkButton"; import GitHubButton from 'react-github-btn' -import LinkTrace from "../link/LinkTrace"; -import {isPC} from "../../utils/navigatorUtils"; import ScrollContainer from "react-indiana-drag-scroll"; import LazyLoad from "react-lazy-load"; +import mediumZoom from "medium-zoom"; +import LinkButton from "../link/LinkButton"; +import ImageZoom from "../../containers/app/ImageZoom"; +import LinkTrace from "../link/LinkTrace"; +import {isPC} from "../../utils/navigatorUtils"; const pictures = [ 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=e9619d9e70adc33f9e5da775410220f5&t=1593501268', 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=0e29c9617c920148f6e8061386b69de0&t=1593501253', ] -const PartMore = () => ( -
-
-
More
-

更多

-
- {isPC() ?
拖拽滑动
: null} -
-
- -
- { - pictures.map((url) => ( - - - - ) - ) - } -
- -
-
-
-

Star

-

最新消息

-

2020.6.29
新的反馈渠道！我们开始征集好玩的二维码设计啦，可以是推送尾图、海报等等，快来上传吧。点击提交。

-

2020.6.24
新增深色模式，新增 SP — 3 样式。

-

2020.6.22
新增 A — a1、A — a2、A — b1、A — b2 样式，添加样式描述，新增桌面端横向拖拽滑动。

-

2020.6.11
QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。访问项目。

-

2020.5.23
网站开源啦！点击访问 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 QRBTF 开源啦！来写个二维码样式吧～。

-

2020.5.22
新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。

-

为什么要做一个二维码生成器？

-

看这里，如何制作一个漂亮的二维码 这篇文章简要介绍了我们的初心与愿景。

-

这个生成器的特别之处在哪里？

-

普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 丰富的参数化样式、基于 SVG 的二维码生成能力，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。

-

如何使用？

-

从输入 URL 开始（别忘了 http://）。没有确认框，没有额外的页面，选择样式后自动更新，调整参数后下载即可。

-

我应该下载 SVG 还是 JPG？

-

这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式，各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG 有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工，如删除中央的信息点 放入自己的 Logo 等。如果需要直接分享二维码图像，请直接下载 JPG 格式。

-

使用遇到了问题，怎么反馈？

-

我们是两位大一的学生，忙于学业，可能在设计与开发的过程中有一些疏漏，敬请谅解。如果遇到浏览器兼容问题，请暂时选择更换软件或设备尝试。

-

请注意，应用并不能保证二维码时刻可被识别，需要多加测试。

-

编写二维码样式是一个锻炼设计与开发（JavaScript）能力的绝佳机会，如果你有兴趣和我们一起玩这个项目，欢迎添加我的微信（微信号：nhciao，请备注真实姓名）或发送邮件至 contact@qrbtf.com 联系我们！

+const PartMore = () => { + const zoom = React.useRef(mediumZoom()); + return ( +
+
+
More
+

更多

+
+ {isPC() ?
拖拽滑动
: null}
-
-
-
-
- -
-
- - + +
+ { + pictures.map((url) => ( + + + + ) + ) + } +
+ +
+
+
+

Star

+

最新消息

+

2020.6.29
新的反馈渠道！我们开始征集好玩的二维码设计啦，可以是推送尾图、海报等等，快来上传吧。点击提交。

+

2020.6.24
新增深色模式，新增 SP — 3 样式。

+

2020.6.22
新增 A — a1、A — a2、A — b1、A — b2 样式，添加样式描述，新增桌面端横向拖拽滑动。

+

2020.6.11
QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。访问项目。

+

2020.5.23
网站开源啦！点击访问 我们的 + Github。期待你也来参与设计、开发！给个 + Star 支持一下不？查看文章 QRBTF + 开源啦！来写个二维码样式吧～。

+

2020.5.22
新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。

+

为什么要做一个二维码生成器？

+

看这里，如何制作一个漂亮的二维码 这篇文章简要介绍了我们的初心与愿景。

+

这个生成器的特别之处在哪里？

+

普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 丰富的参数化样式、基于 SVG 的二维码生成能力，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 + SVG 有较好的拓展性，可以完美兼容矢量制图流程。

+

如何使用？

+

从输入 URL 开始（别忘了 http://）。没有确认框，没有额外的页面，选择样式后自动更新，调整参数后下载即可。

+

我应该下载 SVG 还是 JPG？

+

这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式，各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG + 有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工，如删除中央的信息点 放入自己的 Logo 等。如果需要直接分享二维码图像，请直接下载 JPG 格式。 +

+

使用遇到了问题，怎么反馈？

+

我们是两位大一的学生，忙于学业，可能在设计与开发的过程中有一些疏漏，敬请谅解。如果遇到浏览器兼容问题，请暂时选择更换软件或设备尝试。

+

请注意，应用并不能保证二维码时刻可被识别，需要多加测试。

+

编写二维码样式是一个锻炼设计与开发（JavaScript）能力的绝佳机会，如果你有兴趣和我们一起玩这个项目，欢迎添加我的微信（微信号：nhciao，请备注真实姓名）或发送邮件至 contact@qrbtf.com 联系我们！

+ +
+
+
+
+
+ + +
+
+ + +
-
-) + ) +} export default PartMore; diff --git a/src/containers/app/ImageZoom.js b/src/containers/app/ImageZoom.js new file mode 100644 index 0000000..89c28e5 --- /dev/null +++ b/src/containers/app/ImageZoom.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const ImageZoom = (props) => { + const zoomRef = React.useRef(props.zoom.clone(props)); + + function attachZoom(image) { + zoomRef.current.attach(image); + } + + return +}; + +export default ImageZoom; diff --git a/yarn.lock b/yarn.lock index 2f9f1b5..fcda6d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6733,6 +6733,11 @@ media-typer@0.3.0: resolved "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= +medium-zoom@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.5.tgz#81413dda20ccdd857141ff420cfab788dd32e20e" + integrity sha512-aLGa6WlTuFKWvH88bqTrY5ztJMN+D0hd8UX6BYc4YSoPayppzETjZUcdVcksgaoQEMg4cZSmXPg846fTp2rjRQ== + mem@^4.0.0: version "4.3.0" resolved "https://registry.npm.taobao.org/mem/download/mem-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmem%2Fdownload%2Fmem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"