oneMadeFont.wxml 4.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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 class='made-img-image_1' src='{{obverseImgObject[isActive+"_1"]}}' mode="aspectFill" bindtouchstart="fontTouchstart" bindtouchmove="fontTouchmove"></image>
  6. <image src='{{obverseImgObject[isActive]}}'></image>
  7. <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
  8. <view class='f-box f-align-items-center f-justify-content-center made-prompt' style='text-align:center' wx:if="{{!fontTouch.fontSize && !imgTouch.src}}">{{fontTouch.fontContent}}</view>
  9. <view class='made-box'>
  10. <!-- img -->
  11. <view wx:if="{{imgTouch.src}}" class='edit-content' style='top:{{imgTouch.y}}px;left:{{imgTouch.x}}px'>
  12. <!-- <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='imgDelete'></view> -->
  13. <view animation="{{imgAnimationData}}">
  14. <image src="{{imgTouch.src}}" mode="aspectFit" style='width:{{imgTouch.width}}rpx;height:{{imgTouch.height}}rpx'></image>
  15. </view>
  16. </view>
  17. <!-- font -->
  18. <view wx:if="{{fontTouch.fontSize}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;font-weight:{{fontTouch.bold}};'>
  19. <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;' bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">
  20. <!-- <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='fontDelete'></view> -->
  21. <view id='touchFont' style='font-weight:{{fontTouch.bold ? "bold":""}}'>{{fontTouch.fontContent}}</view>
  22. </view>
  23. </view>
  24. </view>
  25. </made-solid>
  26. </view>
  27. </view>
  28. <!-- <view class='public-prompt'>该预览为仿真效果图,具体请以实物为准</view> -->
  29. <view class='footer'>
  30. <view class='footer-box f-box'>
  31. <navigator open-type="navigateBack" class="f-box f-align-items-center f-justify-content-center footer-icon">
  32. <block>
  33. <icon class='f-box' type="clear" />
  34. </block>
  35. </navigator>
  36. <view class='f-item footer-upload-btn bg-orange c-white' bindtap='fontDelete' style='text-align:center' hover-class="none">清除文字</view>
  37. <view class='f-item footer-add-btn bg-green c-white' bindtap='addFont'>添加文字</view>
  38. <view class="f-box f-align-items-center footer-icon f-justify-content-center" bindtap='madeConfirm'>
  39. <block>
  40. <icon class='f-box' color="#00af66" type="success" />
  41. </block>
  42. </view>
  43. </view>
  44. </view>
  45. <!-- slider -->
  46. <view class='slider-box' wx:if="{{fontTouch.fontSize}}">
  47. <!-- 大小 -->
  48. <view class='f-box f-align-items-center mar-l20 mar-r20'>
  49. <view class='f-s30'>放大</view>
  50. <view class="body-view f-item">
  51. <slider bindchanging="fontEnlarge" block-color="#00af66" block-size="16" min="20" max="280" value='{{fontTouch.fontSize}}' show-value/>
  52. </view>
  53. </view>
  54. <view class='f-box f-align-items-center mar-l20 mar-r20'>
  55. <!-- 度数 -->
  56. <view class='f-s30'>旋转</view>
  57. <view class="body-view f-item">
  58. <slider bindchanging="fontRotate" block-color="#00af66" block-size="16" min="0" max="360" value='{{fontTouch.angle}}' show-value/>
  59. </view>
  60. </view>
  61. <!-- <view class='f-box f-align-items-center mar-l20 mar-r20'> -->
  62. <!-- 加粗 -->
  63. <!-- <view class='f-s30'>加粗</view>
  64. <view class="body-view f-item">
  65. <slider bindchanging="fontWeight" block-color="#00af66" block-size="16" min="100" max="900" value='{{fontTouch.bold}}' show-value/>
  66. </view> -->
  67. <!-- </view> -->
  68. </view>
  69. <!-- 文字层 -->
  70. <view class='font-ceng' wx:if="{{addFontStatic}}">
  71. <view class="f-box f-justify-content-between">
  72. <view class='font-cancel f-s32 c-white mar-l20 mar-t20' bindtap='fontCancel'>取消</view>
  73. <view class='font-confirm f-s32 c-white mar-r20 mar-t20' bindtap='fontConfirm'>完成</view>
  74. </view>
  75. <view class='c-white f-box f-justify-content-center f-s26'>仅支持手机自带字体样式</view>
  76. <view class="input-box">
  77. <input placeholder-style="color:#fff" style='color:{{fontTouch.isColor}};font-weight:{{fontTouch.bold? 900:""}}' placeholder="可编辑文字" bindinput="bindinput" auto-focus />
  78. </view>
  79. <view class='font-color f-box f-justify-content-around'>
  80. <view class='select-weight' bindtap='weightBtn' style='color:{{fontTouch.bold ? "#333":""}};background:{{fontTouch.bold ? "#fff":""}}'>粗</view>
  81. <view wx:for="{{fontColorArray}}" class='{{fontTouch.isColor === item ? "isColor" : ""}}' data-color="{{item}}" bindtap='selectColor'>
  82. <view style='background:{{item}}' class='font-item'></view>
  83. </view>
  84. </view>
  85. </view>