madeFont.wxml 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!--pages/customized/made/madeFont/madeFont.wxml-->
  2. <view class='made-content'>
  3. <!-- <canvas canvas-id='madeContent' class='made-content'></canvas> -->
  4. <view class='made-img-box'>
  5. <image src='{{obverseImgObject[isActive]}}'></image>
  6. <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
  7. <view class='f-box f-align-items-center f-justify-content-center made-prompt' wx:if="{{!touch.fontSize}}">{{touch.fontContent}}</view>
  8. <view wx:else class='made-prompt made-font' style='color:{{touch.isColor}};font-size:{{touch.fontSize}}px'>
  9. <view class='font-content' style='top:{{touch.y}}px;left:{{touch.x}}px'>
  10. <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='fontDelete'></view>
  11. <view bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">{{touch.fontContent}}</view>
  12. <view class='iconfont icon-fangda c-white icon-rotate' touchstart="touchstart" ></view>
  13. </view>
  14. </view>
  15. </made-solid>
  16. </view>
  17. </view>
  18. <view class='public-prompt'>该预览为仿真效果图,具体请以实物为准</view>
  19. <view class='footer f-box'>
  20. <view class="f-box f-align-items-center f-justify-content-center footer-icon">
  21. <block>
  22. <icon class='f-box' type="clear" />
  23. </block>
  24. </view>
  25. <view class='f-item footer-add-btn' bindtap='addFont'>添加文字</view>
  26. <view class="f-box f-align-items-center footer-icon f-justify-content-center">
  27. <block>
  28. <icon class='f-box' type="success" />
  29. </block>
  30. </view>
  31. </view>
  32. <!-- slider -->
  33. <view class='slider-box' wx:if="{{touch.fontSize}}">
  34. <!-- 大小 -->
  35. <view class='f-box f-align-items-center mar-l20 mar-r20'>
  36. <view class='f-s30'>放大</view>
  37. <view class="body-view f-item">
  38. <slider bindchanging="fontEnlarge" block-color="#00af66" block-size="16" min="20" max="200" value='{{touch.fontSize}}' show-value/>
  39. </view>
  40. </view>
  41. <view class='f-box f-align-items-center mar-l20 mar-r20'>
  42. <!-- 度数 -->
  43. <view class='f-s30'>旋转</view>
  44. <view class="body-view f-item">
  45. <slider bindchanging="fontRotate" block-color="#00af66" block-size="16" min="0" max="360" value='{{touch.angle}}' show-value/>
  46. </view>
  47. </view>
  48. </view>
  49. <!-- 文字层 -->
  50. <view class='font-ceng' wx:if="{{addFontStatic}}">
  51. <view class="f-box f-justify-content-between">
  52. <view class='font-cancel f-s32 c-white mar-l20 mar-t20' bindtap='fontCancel'>取消</view>
  53. <view class='font-confirm f-s32 c-white mar-r20 mar-t20' bindtap='fontConfirm'>完成</view>
  54. </view>
  55. <view class='c-white f-box f-justify-content-center f-s26'>仅支持手机自带字体样式</view>
  56. <view class="input-box">
  57. <input placeholder-style="color:#fff" style='color:{{touch.isColor}}' placeholder="可编辑文字" bindinput="bindinput" auto-focus />
  58. </view>
  59. <view class='font-color f-box f-justify-content-around'>
  60. <view wx:for="{{fontColorArray}}" class='{{touch.isColor === item ? "isColor" : ""}}' data-color="{{item}}" bindtap='selectColor'>
  61. <view style='background:{{item}}' class='font-item'></view>
  62. </view>
  63. </view>
  64. <!-- 自带字体样式 -->
  65. <view></view>
  66. </view>