拖动缩放功能
需求背景：选一张海报图片，在海报图片上实现自定义填充文字内容，文字颜色和字体可自定义，且文字区域可以拖动和等比例缩放，最终将文字和海报合成一张新的图片
需要用到的插件：html2canvas（用于将一段html转成canvas）
下面附上整个组件功能代码：
/* eslint-disable camelcase */ import React from 'react' import cx from 'classnames' import {connect} from 'react-redux' import PT from 'prop-types' import html2canvas from 'html2canvas' import AsyncLottie from '../../../../components/AsyncLottie' import lottie from './loading.json' import {showToast} from '../../../../utils/zyHybrid' import {getImgUrl} from '../../../../utils' import {TAB_PANEL, COLOR_SELECTOR, STROKE_COLOR, GREY_STROKE} from './constants' import TextInput from './components/textInput' import bgUrl from '../images/example1.png' import './index.scss' const lottieOpts = { loop: true, autoplay: true, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, } class PosterEditorTool extends React.Component { timer = null resizeRef = null dragRef = null isDraging = false isResizing = false state = { toCanvas: false, currentTabValue: 0, img: { id: ENVIRONMENT === 'production' ? 1398831582 : 1820587098, type: 'img', }, showFontWrap: true, showTextInputCom: false, fontWrapContent: '活动主题', currentFontColor: '#FFFFFF', currentFontFamily: '', fontFamilySelector: [ {family: '', showLoading: false, showDownload: false}, {family: 'PangMenZhengDao', showLoading: false, showDownload: true}, {family: 'SourceHanSansCN-Bold', showLoading: false, showDownload: true}, {family: 'zcool-gdh', showLoading: false, showDownload: true}, {family: 'ZCOOL_KuHei', showLoading: false, showDownload: true}, { family: 'SourceHanSerifCN-Heavy', showLoading: false, showDownload: true, }, { family: 'jiangxizhuokai-Regular', showLoading: false, showDownload: true, }, {family: 'HappyZcool-2016', showLoading: false, showDownload: true}, {family: 'JiangChengYuanTi-500W', showLoading: false, showDownload: true}, {family: 'zcoolwenyiti', showLoading: false, showDownload: true}, {family: 'xiaowei', showLoading: false, showDownload: true}, { family: 'HanaMinPlus', showLoading: false, showDownload: true, }, ], touchPos: {x: 0, y: 0}, dragContainerRefPos: {x: 0, y: 0}, textFontSize: 24, } componentDidMount() { this.showFontInit() } componentWillUnmount() { const {resizeRef, dragRef} = this document.removeEventListener('touchmove', this.handleTouchMove) document.removeEventListener('touchend', this.handleTouchEnd) if (dragRef) { dragRef.removeEventListener('touchstart', this.handleDragRefTouchStart) } if (resizeRef) { resizeRef.removeEventListener( 'touchstart', this.handleResizeRefTouchStart ) } } handleDragRefTouchStart = evt => { this.isDraging = true this.setState({ touchPos: { x: evt.touches[0].pageX, y: evt.touches[0].pageY, }, dragContainerRefPos: { x: parseInt(this.dragRef.style.left, 10), y: parseInt(this.dragRef.style.top, 10), }, }) } handleTouchMove = evt => { const {isDraging, isResizing, dragRef, canvasRef} = this const {touchPos, dragContainerRefPos, textFontSize} = this.state if (isDraging) { const tempTop = parseInt(dragContainerRefPos.y, 10) + parseInt(evt.touches[0].pageY, 10) - parseInt(touchPos.y, 10) dragRef.style.left = `${dragContainerRefPos.x + evt.touches[0].pageX - touchPos.x}px` dragRef.style.top = `${dragContainerRefPos.y + evt.touches[0].pageY - touchPos.y}px` if (tempTop < 0) { dragRef.style.top = '0px' } if (tempTop > canvasRef.offsetHeight - dragRef.offsetHeight) { dragRef.style.top = `${canvasRef.offsetHeight - dragRef.offsetHeight}px` } } if (isResizing) { let fontSize = textFontSize + (evt.touches[0].pageX - touchPos.x) * 0.1 if (fontSize < 10) { fontSize = 10 } else if (fontSize > 80) { fontSize = 80 } dragRef.style.fontSize = `${fontSize}px` } } handleTouchEnd = () => { this.isDraging = false this.isResizing = false } handleResizeRefTouchStart = evt => { evt.stopPropagation() this.isResizing = true this.setState({ textFontSize: parseFloat(this.dragRef.style.fontSize), touchPos: { x: evt.touches[0].pageX, y: evt.touches[0].pageY, }, }) } handleCloseFont = () => { this.setState({ showFontWrap: false, fontWrapContent: '活动主题', textFontSize: '24px', }) } showFontInit = () => { const {resizeRef, dragRef} = this dragRef.style.fontSize = '24px' dragRef.style.top = '0px' dragRef.style.left = '0px' document.addEventListener('touchmove', this.handleTouchMove) document.addEventListener('touchend', this.handleTouchEnd) if (dragRef) { dragRef.addEventListener('touchstart', this.handleDragRefTouchStart) } if (resizeRef) { resizeRef.addEventListener('touchstart', this.handleResizeRefTouchStart) } } handleConfirm = value => { this.setState({ showTextInputCom: false, fontWrapContent: value, }) } setDefaultImg = id => { const img = {id, type: 'img'} this.setState({ img, }) } uploadImg = () => { window.ZuiyouJSBridge.callHandler( 'uploadFile', { count: 1, file_type: 'img', edit: true, multiple: false, clip_scale: 3 / 1, }, data => { const { list: [img], ret, errmsg, } = data // ios 返回 ret 为 "1" if (Number(ret) !== 1) { showToast(errmsg || '上传图片异常，请重试~') return } this.setState({ img, }) } ) } handleClickComplete = () => { const {onComplete} = this.props this.setState({toCanvas: true}, () => { html2canvas(this.canvasRef, { logging: false, useCORS: true, }).then(canvas => { const imgUrl = canvas.toDataURL('image/png') onComplete(imgUrl) }) }) } changeTab = value => { this.setState({ currentTabValue: value, }) } handleSelectColor = color => { this.setState({currentFontColor: color}) const {showFontWrap} = this.state if (!showFontWrap) { this.setState( { showFontWrap: true, }, () => { this.showFontInit() } ) } } handleSelectFontFamily = font => { this.changeFontObjField(font, true, false) const {showFontWrap} = this.state if (!showFontWrap) { this.setState( { showFontWrap: true, }, () => { this.showFontInit() } ) } this.setState( { currentFontFamily: font.family, }, () => { this.changeFontObjField(font, false, false) } ) } changeFontObjField = (fontObj, loading, download) => { const {fontFamilySelector} = this.state const newFontFamilySelector = fontFamilySelector.map(item => { if (item.family === fontObj.family) { return {...item, showLoading: loading, showDownload: download} } return item }) this.setState({fontFamilySelector: newFontFamilySelector}) } renderPosterCoverTab = () => { const {newPosterList} = this.props const {img} = this.state return ( <div className="PosterEditorTool__PosterCoverTab"> <div className="PosterEditorTool__PosterCoverTab__posterUpload" onClick={this.uploadImg} role="button" tabIndex={0} /> {newPosterList.map(item => ( <div className={cx('PosterEditorTool__PosterCoverTab__posterItem', { 'PosterEditorTool__PosterCoverTab__posterItem--selected': img.id === item.id, })} key={item.id} style={{ // backgroundImage: `url(${'https://file.izuiyou.com/img/png/id/1090013920'})`, backgroundImage: `url(${getImgUrl({id: item.id})})`, }} onClick={() => { this.setDefaultImg(item.id) }} role="button" tabIndex={0} /> ))} </div> ) } renderFontSelectWrap = () => { const {currentFontFamily, fontFamilySelector} = this.state return ( <div className="PosterEditorTool__PosterTextTab__fontSelectWrap"> {fontFamilySelector.map((font, index) => ( <div className={cx('PosterEditorTool__PosterTextTab__fontSelectItem', { 'PosterEditorTool__PosterTextTab__fontSelectItem--selected': currentFontFamily === font.family, 'PosterEditorTool__PosterTextTab__fontSelectItem--loading': font.showLoading === true, })} key={font.family} role="button" tabIndex={0} onClick={() => { this.handleSelectFontFamily(font) }} > <div className={`PosterEditorTool__PosterTextTab__fontItemBg PosterEditorTool__PosterTextTab__fontItemBg--${index}`} /> {font.showDownload && ( <div className="PosterEditorTool__PosterTextTab__fontDownloadIcon" /> )} {font.showLoading && ( <div className="PosterEditorTool__PosterTextTab__fontDownloadLoading"> <AsyncLottie options={lottieOpts} animationDataLoader={() => lottie} height="100%" width="100%" /> </div> )} </div> ))} </div> ) } renderPosterTextTab = () => { const {currentFontColor} = this.state return ( <div className="PosterEditorTool__PosterTextTab"> <div className="PosterEditorTool__PosterTextTab__colorWrap"> {COLOR_SELECTOR.map(color => ( <div className="PosterEditorTool__PosterTextTab__colorItemWrap" key={color} role="button" tabIndex={0} onClick={() => { this.handleSelectColor(color) }} > {currentFontColor === color ? ( <div className="PosterEditorTool__PosterTextTab__colorItemSelected" style={{ border: color === GREY_STROKE ? '1px solid #EAEAEA' : `2px solid ${color}`, }} > <span style={{ background: color, border: color === GREY_STROKE ? '1px solid #EAEAEA' : 'none', }} /> </div> ) : ( <div className="PosterEditorTool__PosterTextTab__colorItem" style={{ background: color, border: STROKE_COLOR.indexOf(color) > -1 ? '1px solid #EAEAEA' : 'none', }} /> )} </div> ))} </div> {this.renderFontSelectWrap()} </div> ) } render() { const { currentTabValue, img, showFontWrap, showTextInputCom, fontWrapContent, currentFontColor, currentFontFamily, toCanvas, } = this.state return ( <div className="PosterEditorTool"> <div className="PosterEditorTool__header"> <span onClick={this.handleClickComplete} role="button" tabIndex={0}> 完成 </span> </div> <div ref={ref => { this.canvasRef = ref }} className="PosterEditorTool__posterWrap" > <img src={getImgUrl(img) || bgUrl} alt="" className="PosterEditorTool__posterImg" /> {showFontWrap && ( <div ref={ref => { this.dragRef = ref }} className="PosterEditorTool__dragResizeContainer" style={{ border: !toCanvas ? '1px solid #FFFFFF' : 'none', top: '0px', left: '0px', fontSize: '24px', }} role="button" tabIndex={0} onClick={evt => { this.setState({ currentTabValue: 1, showTextInputCom: true, }) }} > <span className="PosterEditorTool__posterTextWrap" style={{ color: currentFontColor, fontFamily: currentFontFamily, }} > {fontWrapContent} </span> {!toCanvas && ( <div className="PosterEditorTool__closeHandle" role="button" tabIndex={0} onClick={evt => { evt.stopPropagation() this.handleCloseFont() }} /> )} {!toCanvas && ( <div ref={ref => { this.resizeRef = ref }} className="PosterEditorTool__resizeHandle" role="button" tabIndex={0} /> )} </div> )} </div> <div className="PosterEditorTool__bottomContainer"> <div className="PosterEditorTool__tabPanel"> {TAB_PANEL.items().map(item => ( <div className={cx('PosterEditorTool__tabPanelItem', { 'PosterEditorTool__tabPanelItem--selected': item.value === currentTabValue, })} key={item.value} onClick={() => { this.changeTab(item.value) }} role="button" tabIndex={0} > <span>{item.text}</span> </div> ))} </div> {currentTabValue === TAB_PANEL.alias2Value('posterCover') && this.renderPosterCoverTab()} {currentTabValue === TAB_PANEL.alias2Value('posterText') && this.renderPosterTextTab()} </div> {showTextInputCom && ( <TextInput onConfirm={this.handleConfirm} currentFontColor={currentFontColor} currentFontFamily={currentFontFamily} fontWrapContent={fontWrapContent} /> )} </div> ) } } PosterEditorTool.propTypes = { onComplete: PT.func, newPosterList: PT.arrayOf(PT.shape()), } PosterEditorTool.defaultProps = { onComplete: () => {}, newPosterList: [], } export default connect((state, props) => { const { topic: {activity = {}}, } = state const {newPosterList} = activity return {newPosterList} })(PosterEditorTool)
css如下：
@font-face { font-family: "PangMenZhengDao"; src: url("./fonts/PangMenZhengDao.ttf"); } @font-face { font-family: "SourceHanSansCN-Bold"; src: url("./fonts/SourceHanSansCN-Bold.otf"); } @font-face { font-family: "zcool-gdh"; src: url("./fonts/zcool-gdh.ttf"); } @font-face { font-family: "ZCOOL_KuHei"; src: url("./fonts/ZCOOL_KuHei.ttf"); } @font-face { font-family: "SourceHanSerifCN-Heavy"; src: url("./fonts/SourceHanSerifCN-Heavy.otf"); } @font-face { font-family: "jiangxizhuokai-Regular"; src: url("./fonts/jiangxizhuokai-Regular.ttf"); } @font-face { font-family: "HappyZcool-2016"; src: url("./fonts/HappyZcool-2016.ttf"); } @font-face { font-family: "JiangChengYuanTi-500W"; src: url("./fonts/JiangChengYuanTi-500W.ttf"); } @font-face { font-family: "zcoolwenyiti"; src: url("./fonts/zcoolwenyiti.ttf"); } @font-face { font-family: "xiaowei"; src: url("./fonts/xiaowei.otf"); } @font-face { font-family: "HanaMinPlus"; src: url("./fonts/HanaMinPlus.ttf"); } .PosterEditorTool { position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; background: #000000; box-sizing: border-box; z-index: 999; padding-top: 10px; &__header { font-family: PingFang SC; font-style: normal; font-weight: normal; font-size: 17px; line-height: 24px; text-align: right; color: #FFFFFF; padding-right: 10px; } &__posterWrap { position: relative; width: 100vw; height: 33.33333333vw; margin-top: 100px; } &__posterImg { width: 100%; height: 100%; object-fit: cover; } &__dragResizeContainer { position: absolute; box-sizing: border-box; padding: 13px 25px; font-size: 24px; background-color: transparent; white-space: nowrap; top: 0px; left: 0px; } &__posterTextWrap { color: #ffffff; white-space: nowrap; } &__resizeHandle { z-index: 11; width: 24px; height: 24px; position: absolute; background: url("./images/drag_icon.png") no-repeat center center / 100% 100% transparent; right: -10px; bottom: -10px; } &__closeHandle { z-index: 11; width: 24px; height: 24px; position: absolute; background: url("./images/font_close_icon.png") no-repeat center center / 100% 100% transparent; right: -10px; top: -10px; } &__bottomContainer { position: absolute; width: 100%; height: 320px; left: 0px; bottom: 0px; background: #FFFFFF; display: flex; flex-direction: column; } &__tabPanel { display: flex; padding: 11px 0 0 16px; flex-shrink: 0; } &__tabPanelItem { display: flex; flex-direction: column; align-items: center; &:nth-of-type(2) { margin-left: 26px; } span { font-family: PingFang SC; font-style: normal; font-weight: normal; font-size: 16px; line-height: 22px; color: #626470; } &--selected { span { font-weight: 500; color: #242529; } &::after { margin-top: 2px; display: inline-block; content: ''; width: 9px; height: 3px; background: url("./images/panel_line_icon.png") no-repeat center center / 100% 100% transparent; } } } &__PosterCoverTab { flex-grow: 1; overflow-y: scroll; padding: 12px 16px 0 16px; display: flex; flex-wrap: wrap; justify-content: space-between; &__posterItem, &__posterUpload { width: 44.8vw; height: 14.933333vw; border-radius: 4px; background-repeat: no-repeat; background-size: 100% auto; flex-shrink: 0; } &__posterItem { margin-top: 7px; box-sizing: border-box; &--selected { border: 1.5px solid #149EFF; } &:nth-of-type(2) { margin-top: 0px; } } &__posterUpload { background-image: url('./images/upload_bg_icon.png'); } } &__PosterTextTab { flex-grow: 1; overflow-y: scroll; padding-top: 12px; &__fontSelectWrap { padding: 10px 16px 16px 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; } &__fontSelectItem { width: 81px; height: 56px; background: #F5F5F7; border-radius: 6px; box-sizing: border-box; margin-top: 6px; position: relative; &--selected { background: rgba(20, 158, 255, 0.1); border: 1.5px solid #149EFF; } &--loading { background: rgba(0, 0, 0, 0.1); border: none; pointer-events: none; } } &__fontItemBg { width: 100%; height: 100%; &--0 { display: flex; justify-content: center; align-items: center; &::after { content: '默认字体'; font-family: ''; font-style: normal; font-weight: normal; font-size: 13px; color: #626470; } } &--1 { background: url("./images/font_icon_1.png") no-repeat center center / 100% 100% transparent; } &--2 { background: url("./images/font_icon_2.png") no-repeat center center / 100% 100% transparent; } &--3 { background: url("./images/font_icon_3.png") no-repeat center center / 100% 100% transparent; } &--4 { background: url("./images/font_icon_4.png") no-repeat center center / 100% 100% transparent; } &--5 { background: url("./images/font_icon_5.png") no-repeat center center / 100% 100% transparent; } &--6 { background: url("./images/font_icon_6.png") no-repeat center center / 100% 100% transparent; } &--7 { background: url("./images/font_icon_7.png") no-repeat center center / 100% 100% transparent; } &--8 { background: url("./images/font_icon_8.png") no-repeat center center / 100% 100% transparent; } &--9 { background: url("./images/font_icon_9.png") no-repeat center center / 100% 100% transparent; } &--10 { background: url("./images/font_icon_10.png") no-repeat center center / 100% 100% transparent; } &--11 { background: url("./images/font_icon_11.png") no-repeat center center / 100% 100% transparent; } } &__fontDownloadIcon { position: absolute; width: 16px; height: 16px; background: url("./images/font_download_icon.png") no-repeat center center / 100% 100% transparent; right: -2px; bottom: -2px; } &__fontDownloadLoading { position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); } &__colorWrap { overflow-x: scroll; padding-left: 16px; display: flex; align-items: center; } &__colorItemWrap { margin-left: 12px; &:nth-of-type(1) { margin-left: 0px; } } &__colorItem { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; } &__colorItemSelected { width: 24px; height: 24px; box-sizing: border-box; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; } } } }
注意点：在使用html2canvas时，如果HTML内包含需要请求接口URL的图片时，会有跨域问题，需要URL域名设置允许跨域。
