uniapp使用canvas制作取色器

Posted 2023-03-18

参考技术A 预览效果

1.主页面  index.vue（引入组件，编写数据逻辑）

<template>

  <view class="content">

    <view class="context">

      <modulationColor

        :colorWidth="colorWidth"

        :colorHeight="colorHeight"

        :colorImg="colorImg"

        :colorShape="colorShape"

        @getColorRGB="getColorRGB"

      ></modulationColor>

    </view>

  </view>

</template>

<script>

import modulationColor from "./color.vue";

export default 

  name: "lighting",

  components: 

    modulationColor,

  ,

  data() 

    return 

      colorWidth: 200,

      colorHeight: 200,

      colorShape: 2,

      colorImg: require("@/static/color.png"),

    ;

  ,

  methods: 

    getColorRGB(rgbColor) 

      console.log(rgbColor, "获取的颜色");

    ,

    async initializeData() ,

  ,

  mounted() 

    this.initializeData();

  ,

;

</script>

<style lang="scss" scoped>

.context 

  width: 90vw;

  margin-top: 30rpx;

  background: #ffffff;

  border-radius: 44rpx;



</style>

2.组件页面  color.vue  （组件页面，负责选择颜色）

<template>

  <view class="canvasPage">

    <!-- 红(R)、绿(G)、蓝(B) -->

    <view class="textArea">

      <view class="title">灯光调节</view>

      <view class="RGB">

        <view

          :style=" background: canvasBackground "

          class="showColor"

        ></view>

        <view class="">  canvasBackground </view>

      </view>

    </view>

    <view

      class="canvasArea"

      :style="

        height: colorHeights + 'px',

        zIndex: 999,

      "

    >

      <view>

        <canvas

          @tap="tapCanvas"

          :style="

            width: colorWidths + 'px',

            height: colorHeights + 'px',

          "

          canvas-id="myCanvas"

          id="myCanvas"

        ></canvas>

      </view>

    </view>

    <view class="colorItem">

      <view

        class="default"

        v-for="(item, index) in defaultColorList"

        :key="index"

        @click="handleDefaultColor(item)"

      >

        <view class="color" :style=" background: item.background "></view>

        <view class="text"> item.title </view>

      </view>

    </view>

  </view>

</template>

<script>

export default 

  props: 

    //选中图的宽度

    colorWidth: 

      type: Number,

      default: 300,

    ,

    //选中图的高度

    colorHeight: 

      type: Number,

      default: 300,

    ,

    //是否进行裁剪，1.正方形 2.圆形

    colorShape: 

      type: Number,

      default: 1,

    ,

    //是否进行裁剪，1.正方形 2.圆形

    colorImg: 

      type: String,

      default: require("@/static/color.png"),

    ,

  ,

  data() 

    return 

      colorWidths: 1, //canvas图片的宽度

      colorHeights: 1, //canvas图片的高度

      pointWidth: 1, //选中点的宽度

      pointHeight: 1, //选中点的高度

      canvasBackground: "RGB(234, 216, 78)",

      defaultColorList: [

        

          title: "极光白",

          background: "RGB(255, 255, 255)",

        ,

        

          title: "日光白",

          background: "RGB(255, 252, 213)",

        ,

        

          title: "精致黄",

          background: "RGB(242, 234, 157)",

        ,

        

          title: "日落黄",

          background: "RGB(234, 216, 78)",

        ,

      ],

    ;

  ,

  mounted() 

    this.colorWidths = parseInt(this.colorWidth);

    this.colorHeights = parseInt(this.colorHeight);

    this.initCanvas();

  ,

  methods: 

    /*初始化画布*/

    initCanvas() 

      let that = this;

      const context = uni.createCanvasContext("myCanvas", this);

      if (that.colorShape == 2) 

        context.arc(

          that.colorWidths / 2,

          that.colorHeights / 2,

          that.colorHeights / 2,

          0,

          2 * Math.PI,

          true

        ); //裁剪形状

        context.clip(); //进行裁剪

      

      context.drawImage(

        that.colorImg,

        0,

        0,

        that.colorWidths,

        that.colorHeights

      ); // 画图片在画布上

      context.save();

      context.beginPath();

      setTimeout(function () 

        //必须延迟执行 不然H5不显示

        context.restore(); //修复图层

        context.draw(); //必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示

      , 500);

    ,

    //点击调色板事件

    tapCanvas(e) 

      let that = this;

      let clientX = e.target.x - e.target.offsetLeft;

      let clientY = e.target.y - e.target.offsetTop;

      let color = uni.canvasGetImageData(

        canvasId: "myCanvas",

        x: clientX,

        y: clientY,

        width: that.pointWidth,

        height: that.pointHeight,

        success(res) 

          if (res.data.length >= 4) 

            let getColorRGB =

              "RGB(" +

              res.data[0] +

              "," +

              res.data[1] +

              "," +

              res.data[2] +

              ")";

            that.canvasBackground = getColorRGB;

            that.$emit("getColorRGB", that.canvasBackground);

           else 

            console.log("获取颜色异常");

          

        ,

        fail: function (error) 

          console.log("fail", error);

        ,

      );

    ,

    //选择默认颜色事件

    handleDefaultColor(data) 

      this.canvasBackground = data.background;

      this.$emit("getColorRGB", this.canvasBackground);

    ,

  ,

;

</script>

<style scope lang="scss">

.canvasPage 

  width: 100%;

  padding: 50rpx 40rpx 50rpx 40rpx;



.textArea 

  width: 100%;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  margin-top: 20rpx;

  margin-bottom: 20rpx;

  .title 

    font-size: 24rpx;

    font-weight: bold;

    color: #344d78;

  

  .RGB 

    font-size: 24rpx;

    font-weight: 400;

    color: #aebdd7;

  



.canvasArea 

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: flex-start;



.showColor 

  width: 20rpx;

  height: 20rpx;

  margin-right: 20rpx;



.colorItem 

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 50rpx;

  .default 

    .color 

      width: 100rpx;

      height: 100rpx;

      border-radius: 50%;

    

    .text 

      font-size: 24rpx;

      font-weight: 400;

      color: #aebdd7;

      line-height: 80rpx;

    

  



</style>

3.调色板图片

4.最终效果