添加文字

components/component-made/made-solid.wxml

@@ -4,6 +4,8 @@
       <view class='right'>{{propSize.right}}</view>
       <view class='bottom'>{{propSize.bottom}}</view>
       <view class='left'>{{propSize.left}}</view>
+      <view class='solid-slot'>
       <slot></slot>
+      </view>
   </view>
 </view>

components/component-made/made-solid.wxss

@@ -19,6 +19,11 @@
   z-index:100;
   color:#fff;
   font-size:26rpx;
+  
+}
+.solid-slot{
+  height:inherit;
+  overflow: hidden;
 }
 .solid .top{
   position:absolute;

customized/pages/made/made.wxml

@@ -1,3 +1,8 @@
+<canvas canvas-id='madeContent' class='made-content'>
+  <canvas canvas-id='myCanvasImg' class='made-img' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'>
+    <canvas canvas-id='myCanvasFont' class='made-font' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}}'></canvas>
+  </canvas> 
+</canvas>
 <view class='content'>
 <!-- 定制杯子 canvas 不合适 -->
 <!-- <view class='cup-box'>
@@ -6,15 +11,10 @@
     <view class='f-box f-align-items-center f-justify-content-center made-prompt'>可定制区域</view>
   </made-solid>
 </view> -->
-<canvas canvas-id='madeContent' class='made-content'>
-<!-- <image src='/images/customized/cup_black_big.png' bindload="imageLoad"/> -->
-  <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
-    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
+ <!-- <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
     <view class='f-box f-align-items-center f-justify-content-center made-prompt'>可定制区域</view>
-  </made-solid>
-  <canvas canvas-id='myCanvasImg' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
-  <canvas canvas-id='myCanvasFont' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
-</canvas>
+  </made-solid> -->
+
 
 <view class='btn-box'>
   <view class='f-box f-justify-content-between'>

customized/pages/made/made.wxss

@@ -6,18 +6,28 @@ page{
  width:100%;
  height:588rpx;
  margin:60rpx 0;
+ /* position:relative; */
 }
 
 .made-prompt{
   width:inherit;
   height:inherit;
 }
-.made-box{
+.made-img{
+  /* position:absolute;
+  z-index:100; */
+background:red;
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
+  margin:0 auto;
+}
+.made-font{
+  background:blue;
   width:270rpx;
   height:270rpx;
   padding:1rpx;
   margin:0 auto;
-  background:red;
 }
 .btn-box{
   width:70%;

customized/pages/made/madeFont/madeFont.js

@@ -17,6 +17,9 @@ Page({
       bottom: '8cm',
       left: '8cm',
     },
+    fontContent: '可定制区域',
+    fontColor:'#fff',
+    fontSize:null,
     isActive: '1', // 默认是正面
     
     obverseImgObject: {
@@ -29,28 +32,30 @@ Page({
     fontColor: ['#ffffff','#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
     isColor: '#ffffff', // 默认是白色
     addFontStatic: false, // 添加文字
+    inputFont:null
+
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    let that = this;
-    that.changeCupImg('1');
+   
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-
+    let that = this;
+    that.changeCupImg('1');
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    
   },
 
   /**
@@ -90,37 +95,45 @@ Page({
    changeCupImg(index) {
     
     let canvasBg = this.data.obverseImgObject[index],that = this;
-    wx.getSystemInfo({
-      success: function (res) {
-        let rpx = res.windowWidth / 750;
-        const ctx = wx.createCanvasContext('madeContent');
-        ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
-        ctx.draw();
-      },
-    })
+    // wx.getSystemInfo({
+    //   success: function (res) {
+    //     let rpx = res.windowWidth / 750;
+    //     const ctx = wx.createCanvasContext('madeContent');
+    //     ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
+    //     ctx.draw();
+    //     setTimeout(()=>{
+    //       that.handleCanvarToImg(that)
+    //     },1000)
+    //   },
+    // })
   },
   addFont(){ // 添加文字
   let that = this;
-    wx.canvasToTempFilePath({
-      x: 0,
-      y: 0,
-      width: 750,
-      height: 588,
-      canvasId: 'madeContent',
-      success: function (res) {
-        that.setData({
-          radarImg: res.tempFilePath,
-        })
-        setTimeout(()=>{
-          that.setData({
-            addFontStatic: true
-          })
-        },200)
-        
-      }
-    });
-    
-    
+    that.setData({
+      addFontStatic: true
+    })
+  },
+  fontCancel(){
+    this.setData({
+      addFontStatic: false
+    })
+  },
+  bindinput(e){
+    this.setData({
+      inputFont: e.detail.value,
+    })
+  },
+  fontConfirm(e){
+    console.log('点击完成', e.detail)
+    let that = this;
+    if (that.data.inputFont){
+      that.setData({
+        fontContent: that.data.inputFont,
+        fontColor: that.data.isColor,
+        fontSize:'88rpx',
+        addFontStatic: false
+      })
+    }
   },
   handleCanvarToImg(that){
     wx.canvasToTempFilePath({

customized/pages/made/madeFont/madeFont.wxml

@@ -1,19 +1,13 @@
 <!--pages/customized/made/madeFont/madeFont.wxml-->
 
-<view>
-  <canvas canvas-id='madeContent' class='made-content' wx:if="{{!radarImg}}">
-  <!-- <image src='/images/customized/cup_black_big.png' bindload="imageLoad"/> -->
-    
-    <canvas canvas-id='myCanvasImg' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'>
-    <canvas canvas-id='myCanvasFont' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
-    </canvas>
+<view class='made-content'>
+  <!-- <canvas canvas-id='madeContent' class='made-content'></canvas> -->
+  <view class='made-img-box'>
+    <image src='{{obverseImgObject[isActive]}}'></image>
     <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
-      <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
-      <view class='f-box f-align-items-center f-justify-content-center made-prompt'>可定制区域</view>
+      <view class='f-box f-align-items-center f-justify-content-center made-prompt' style='color:{{fontColor}};font-size:{{fontSize}}'>{{fontContent}}</view>
     </made-solid>
-    
-  </canvas>
-  <image wx:else src='{{radarImg}}' class='made-box-img'></image>
+  </view>
 </view>
 <view class='public-prompt'>该预览为仿真效果图，具体请以实物为准</view>
 <view class='footer f-box'>
@@ -32,8 +26,13 @@
 
 <!-- 文字层 -->
 <view class='font-ceng' wx:if="{{addFontStatic}}">
+  <view class="f-box f-justify-content-between">
+    <view class='font-cancel f-s32 c-white mar-l20 mar-t20' bindtap='fontCancel'>取消</view>
+    <view class='font-confirm f-s32 c-white mar-r20 mar-t20' bindtap='fontConfirm'>完成</view>
+  </view>
+  <view class='c-white f-box f-justify-content-center f-s26'>仅支持手机自带字体样式</view>
   <view class="input-box">
-    <input placeholder-style="color:{{isColor}}" style='color:{{isColor}}' placeholder="可编辑文字" auto-focus />
+    <input placeholder-style="color:#fff" style='color:{{isColor}}' placeholder="可编辑文字" bindinput="bindinput" auto-focus />
   </view>
 
   <view class='font-color f-box f-justify-content-around'>

customized/pages/made/madeFont/madeFont.wxss

@@ -2,10 +2,14 @@
 page{
   background:#fff;
 }
-.made-content,.made-box-img{
- width:100%;
- height:588rpx;
- margin:60rpx 0;
+
+.made-img-box{
+  position:relative;
+  margin-top:60rpx;
+}
+.made-img-box image {
+  width:100%;
+  height:588rpx;
 }
 .made-prompt{
   width:inherit;
@@ -53,7 +57,7 @@ page{
   width:600rpx;
   height:150rpx;
   line-height:150rpx;
-  margin:88rpx auto 50rpx;
+  margin:50rpx auto;
   text-align:center;
   background:none;
   border:1rpx dashed #fff;

readme.md

@@ -1,4 +1,6 @@
 ### https://blog.csdn.net/u011364720/article/details/82869207
 
 ### 项目需求原型 z3qowq.axshare.com
-### 功能列表 https://mubu.com/doc/yc_fdq72c0
+### 功能列表 https://mubu.com/doc/yc_fdq72c0
+
+### https://blog.csdn.net/qq_37942845/article/details/80169907

style/customized.wxss

@@ -94,6 +94,15 @@
 .t-right{
   text-align: right
 }
+.f-s26{
+  font-size:26rpx;
+}
+.f-s28{
+  font-size:28rpx;
+}
+.f-s30{
+  font-size:30rpx;
+}
 .f-s32{
   font-size:32rpx;
 }
@@ -123,5 +132,5 @@
   color:#626262;
   font-size:24rpx;
   position:fixed;
-  bottom: 106rpx;
+  bottom: 92rpx;
 }