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