Image zoom

This commit is contained in:
CPunisher 2020-06-30 22:09:18 +08:00
parent bcbef2b69f
commit 53dd13d81f
4 changed files with 107 additions and 62 deletions

View File

@ -7,6 +7,7 @@
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
"jsqr": "^1.3.1", "jsqr": "^1.3.1",
"medium-zoom": "^1.0.5",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-color": "^2.18.1", "react-color": "^2.18.1",

View File

@ -1,80 +1,106 @@
import React from 'react'; import React from 'react';
import './App.css'; import './App.css';
import LinkButton from "../link/LinkButton";
import GitHubButton from 'react-github-btn' import GitHubButton from 'react-github-btn'
import LinkTrace from "../link/LinkTrace";
import {isPC} from "../../utils/navigatorUtils";
import ScrollContainer from "react-indiana-drag-scroll"; import ScrollContainer from "react-indiana-drag-scroll";
import LazyLoad from "react-lazy-load"; 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 = [ 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/gallery02.jpg?sign=e9619d9e70adc33f9e5da775410220f5&t=1593501268',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=0e29c9617c920148f6e8061386b69de0&t=1593501253', 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=0e29c9617c920148f6e8061386b69de0&t=1593501253',
] ]
const PartMore = () => ( const PartMore = () => {
<div className="Qr-titled-nobg"> const zoom = React.useRef(mediumZoom());
<div className="Qr-Centered title-margin">
<div className="Qr-s-title">More</div>
<p className="Qr-s-subtitle">更多</p>
<div className="Qr-s-subtitle Qr-rel">
{isPC() ? <div className="Qr-style-hint">拖拽滑动</div> : null}
</div>
</div>
<ScrollContainer
className="Qr-s Qr-s-gallery"
hideScrollbars={false}
horizontal={true}
vertical={false}>
<div className="Qr-box">
{
pictures.map((url) => (
<LazyLoad offsetVertical={200}>
<img className="Qr-gallery-image" src={url} />
</LazyLoad>
)
)
}
</div>
</ScrollContainer>
<div className="title-margin">
<div className="Qr-article">
<div className="Qr-Centered">
<p><GitHubButton href="https://github.com/ciaochaos/qrbtf" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
<h2>最新消息</h2>
<p><b>2020.6.29</b><br/>新的反馈渠道我们开始征集好玩的二维码设计啦可以是推送尾图海报等等快来上传吧<LinkTrace href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer" target="_blank">点击提交</LinkTrace></p>
<p><b>2020.6.24</b><br/>新增深色模式新增 SP 3 样式</p>
<p><b>2020.6.22</b><br/>新增 A a1A a2A b1A b2 样式添加样式描述新增桌面端横向拖拽滑动</p>
<p><b>2020.6.11</b><br/>QRBTF React 组件发布快在你的应用中引入 react-qrbtf <LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace></p>
<p><b>2020.5.23</b><br/>网站开源啦<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发给个 Star 支持一下不?查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦来写个二维码样式吧</LinkTrace></p>
<p><b>2020.5.22</b><br/>新增 C2 样式下载计数好像还不太稳定普通二维码上传颜色选择背景图片上传输入提示桌面端横向滚动提示</p>
<h2>为什么要做一个二维码生成器</h2>
<p>看这里<LinkTrace href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</LinkTrace> </p>
<h2>这个生成器的特别之处在哪里</h2>
<p>普通的二维码样式单一不能与环境较好的融合这一个生成器有着 <b>丰富的参数化样式基于 SVG 的二维码生成能力</b> SVG </p>
<h2>如何使用</h2>
<p>从输入 URL 开始别忘了 http://)。没有确认框,没有额外的页面,选择样式后自动更新,调整参数后下载即可。</p>
<h2>我应该下载 SVG 还是 JPG</h2>
<p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中SVG 是一个优秀的标准的矢量图片格式各大设计软件如 Adobe IllustratorSketch 等都对 SVG 有着很好的支持用户可以在下载 SVG 后导入这些软件进行二次加工如删除中央的信息点 <b>放入自己的 Logo</b> JPG </p>
<h2>使用遇到了问题怎么反馈</h2>
<p>我们是两位大一的学生忙于学业可能在设计与开发的过程中有一些疏漏敬请谅解如果遇到浏览器兼容问题请暂时选择更换软件或设备尝试</p>
<p>请注意应用并不能保证二维码时刻可被识别需要多加测试</p>
<p>编写二维码样式是一个锻炼设计与开发JavaScript能力的绝佳机会如果你有兴趣和我们一起玩这个项目欢迎添加我的微信微信号<span style={{userSelect: "text"}}>nhciao</span> <LinkTrace href='mailto:contact@qrbtf.com'>contact@qrbtf.com</LinkTrace> </p>
return (
<div className="Qr-titled-nobg">
<div className="Qr-Centered title-margin">
<div className="Qr-s-title">More</div>
<p className="Qr-s-subtitle">更多</p>
<div className="Qr-s-subtitle Qr-rel">
{isPC() ? <div className="Qr-style-hint">拖拽滑动</div> : null}
</div> </div>
</div>
</div>
<div className="Qr-Centered btn-row">
<div className="div-btn">
<LinkButton href={"https://www.yuque.com/qrbtf/docs/donate"} value={"打赏"} />
<LinkButton href={"https://github.com/ciaochaos/qrbtf"} value={"Github"} />
</div> </div>
<div className="div-btn"> <ScrollContainer
<LinkButton href={"https://qrbtf-com.mikecrm.com/J2wjEEq"} value={"反馈"} /> className="Qr-s Qr-s-gallery"
<LinkButton href={"https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ"} value={"开发"} /> hideScrollbars={false}
horizontal={true}
vertical={false}>
<div className="Qr-box">
{
pictures.map((url) => (
<LazyLoad offsetVertical={200}>
<ImageZoom zoom={zoom.current} background={"rgba(0, 0, 0, 0)"} className="Qr-gallery-image" src={url}/>
</LazyLoad>
)
)
}
</div>
</ScrollContainer>
<div className="title-margin">
<div className="Qr-article">
<div className="Qr-Centered">
<p><GitHubButton href="https://github.com/ciaochaos/qrbtf"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-icon="octicon-star" data-size="large" data-show-count="true"
aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
<h2>最新消息</h2>
<p><b>2020.6.29</b><br/>新的反馈渠道我们开始征集好玩的二维码设计啦可以是推送尾图海报等等快来上传吧<LinkTrace
href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer"
target="_blank">点击提交</LinkTrace></p>
<p><b>2020.6.24</b><br/>新增深色模式新增 SP 3 样式</p>
<p><b>2020.6.22</b><br/>新增 A a1A a2A b1A b2 样式添加样式描述新增桌面端横向拖拽滑动</p>
<p><b>2020.6.11</b><br/>QRBTF React 组件发布快在你的应用中引入 react-qrbtf <LinkTrace
href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer"
target="_blank">访问项目</LinkTrace></p>
<p><b>2020.5.23</b><br/>网站开源啦<LinkTrace href='https://github.com/ciaochaos/qrbtf'
rel="noopener noreferrer"
target="_blank">点击访问</LinkTrace>
Github期待你也来参与设计开发给个
Star 支持一下不查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ'
rel="noopener noreferrer" target="_blank">QRBTF
开源啦来写个二维码样式吧</LinkTrace></p>
<p><b>2020.5.22</b><br/>新增 C2 样式下载计数好像还不太稳定普通二维码上传颜色选择背景图片上传输入提示桌面端横向滚动提示</p>
<h2>为什么要做一个二维码生成器</h2>
<p>看这里<LinkTrace href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g'
rel="noopener noreferrer"
target="_blank">如何制作一个漂亮的二维码</LinkTrace> </p>
<h2>这个生成器的特别之处在哪里</h2>
<p>普通的二维码样式单一不能与环境较好的融合这一个生成器有着 <b>丰富的参数化样式基于 SVG 的二维码生成能力</b>
SVG 有较好的拓展性可以完美兼容矢量制图流程</p>
<h2>如何使用</h2>
<p>从输入 URL 开始别忘了 http://)。没有确认框,没有额外的页面,选择样式后自动更新,调整参数后下载即可。</p>
<h2>我应该下载 SVG 还是 JPG</h2>
<p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中SVG 是一个优秀的标准的矢量图片格式各大设计软件如 Adobe IllustratorSketch 等都对 SVG
有着很好的支持用户可以在下载 SVG 后导入这些软件进行二次加工如删除中央的信息点 <b>放入自己的 Logo</b> JPG
</p>
<h2>使用遇到了问题怎么反馈</h2>
<p>我们是两位大一的学生忙于学业可能在设计与开发的过程中有一些疏漏敬请谅解如果遇到浏览器兼容问题请暂时选择更换软件或设备尝试</p>
<p>请注意应用并不能保证二维码时刻可被识别需要多加测试</p>
<p>编写二维码样式是一个锻炼设计与开发JavaScript能力的绝佳机会如果你有兴趣和我们一起玩这个项目欢迎添加我的微信微信号<span
style={{userSelect: "text"}}>nhciao</span> <LinkTrace
href='mailto:contact@qrbtf.com'>contact@qrbtf.com</LinkTrace> </p>
</div>
</div>
</div>
<div className="Qr-Centered btn-row">
<div className="div-btn">
<LinkButton href={"https://www.yuque.com/qrbtf/docs/donate"} value={"打赏"}/>
<LinkButton href={"https://github.com/ciaochaos/qrbtf"} value={"Github"}/>
</div>
<div className="div-btn">
<LinkButton href={"https://qrbtf-com.mikecrm.com/J2wjEEq"} value={"反馈"}/>
<LinkButton href={"https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ"} value={"开发"}/>
</div>
</div> </div>
</div> </div>
</div> )
) }
export default PartMore; export default PartMore;

View File

@ -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 <img ref={attachZoom} {...props} />
};
export default ImageZoom;

View File

@ -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" resolved "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= 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: mem@^4.0.0:
version "4.3.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" 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"