HarryChen0506/taro-makaron-demo

Taro-makaron-demo
├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── assets             静态资源
|   |   ├── images         图片
|   ├── components         组件
|   |   ├── Sticker        贴纸组件
|   |   ├── ...            其他组件
|   ├── model              Redux数据流
|   |   ├── actions        
|   |   ├── constants        
|   |   ├── reducers        
|   |   ├── store        
|   ├── pages              页面文件目录
|   |   ├── home           首页
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   |   ├── dynamic        作图页
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── services           服务
|   |   ├── config.ts      全局配置
|   |   ├── api.config.ts  api接口配置
|   |   ├── http.ts        封装的http服务
|   |   ├── global_data.ts 全局对象
|   |   ├── cache.ts       缓存服务
|   |   ├── session.ts     会话服务
|   |   ├── service.ts     基础服务或业务服务
|   ├── utils              公共方法
|   |   ├── tool.ts        工具函数
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

// 使用
class Page extends Component {
    state = {
        foreground: { // 人像state
          id: 'foreground', // id
          remoteUrl: '', // url
          zIndex:2, // 层级
          width:0, // 宽
          height:0, // 高
          x: 0, // x轴偏移量
          y:0, // y轴偏移量
          rotate: 0, // 旋转角度
          originWidth: 0, // 原始宽度
          originHeight: 0, // 原始高度
          autoWidth: 0, // 自适应后的宽度
          autoHeight: 0, // 自适应后的高度
          autoScale: 0, // 相对画框缩放比例
          fixed: false, // 是否固定
          isActive: true, // 是否激活
          visible: true, // 是否显示
        }
    }
    render () {
        reuturn <Sticker 
                    ref="foreground"
                    url={foreground.remoteUrl}
                    stylePrams={foreground}                
                    framePrams={frame}
                    onChangeStyle={this.handleChangeStyle}
                    onImageLoaded={this.handleForegroundLoaded}
                    onTouchstart={this.handleForegroundTouchstart}
                    onTouchend={this.handleForegroundTouchend}
              />
    }
}

// 组件定义
class Sticker extends Component {
...
    render() {
        const { url, stylePrams } = this.props
        const { framePrams } = this.state
        const styleObj = this.formatStyle(this.props.stylePrams)
        return (
          <View 
            className={`sticker-wrap ${stylePrams.fixed ? 'event-through' : ''} ${(stylePrams.visible && stylePrams.width > 0) ? '' : 'hidden' }`}
            style={styleObj}
          > 
            <Image 
              src={url} 
              mode="widthFix" 
              style="width:100%;height:100%"
              onLoad={this.handleImageLoaded} // 图片加载后将原始尺寸信息通知给父组件
              onTouchstart={this.stickerOntouchstart} 
              onTouchmove={this.throttledStickerOntouchmove} // touchmove比较频繁，需要节留
              onTouchend={this.stickerOntouchend}/>
            <View className={`border ${stylePrams.isActive ? 'active' : ''}`}></View>
            <View className={`control ${stylePrams.isActive ? 'active' : ''}`}
              onTouchstart={this.arrowOntouchstart} 
              onTouchmove={this.throttledArrowOntouchmove}
              onTouchend={this.arrowOntouchend}
            >
              <Image src={scale} mode="widthFix" style="width:50%;height:50%"/>
            </View>
          </View>
        )
    }
}

// services/cache.ts 缓存服务
function Cache (name) {
  this.name = name
}
Cache.prototype = {
  set: function (key, value) {
    this[key] = value
    return this[key]
  },
  get: function (key) {
    return this[key]
  },
  clear: function () {
    // 清空
    Object.keys(this).forEach(v => {
      this[v] = null
    })
  }
}

export const createCache = (name:string) => {
  return new Cache(name)
}
// 使用
import {createCache} from '../../services/cache'
class Page extends Component {
  cache = {
    source: createCache('source'),
  }
  // 下载照片并存储到本地
  downloadRemoteImage = async (remoteUrl = '') => {
    const cacheKey = `${remoteUrl}_localPath`
    const cache_source = this.cache['source']
    let localImagePath = ''
    if (cache_source.get(cacheKey)) {
      // 有缓存
      return cache_source.get(cacheKey)
    } else {
      try {
        const result = await service.base.downloadFile(remoteUrl)
        localImagePath = result.tempFilePath
      } catch (err) {
        console.log('下载图片失败', err)
      }
    }
    return cache_source.set(cacheKey, localImagePath)
  }
}