uniapp使用canvas制作取色器

预览效果

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.最终效果


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容