发布时间：2024-02-04 16:00
体验地址
使用canvas，通过监听鼠标动作来进行绘图。
关键代码如下：
drawing(event){
if(!this.penClick) return;//鼠标按下状态
const canvas = document.getElementById(\'canvas\'); //获取canvas标签
const ctx = canvas.getContext(\"2d\");//创建 contextconst canvas = document.getElementById(\'canvas\'); 对象
const stopAxisX = event.pageX;//当前鼠标x坐标
const stopAxisY = event.pageY;//当前鼠标y坐标
const left = document.getElementById(\'leftMenu\');//可忽略
const lw = left && left.offsetWidth ? (left.offsetWidth || 0) / 2 : 0;
ctx.beginPath();//是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
const wsaW = window.screen.availWidth;
const cl = canvas.offsetLeft;
const ct = canvas.offsetTop;
ctx.moveTo(this.startAxisX-cl,this.startAxisY - ct);//moveTo(x,y) 定义线条开始坐标
ctx.lineTo(stopAxisX-cl,stopAxisY - ct );//lineTo(x,y) 定义线条结束坐标
ctx.strokeStyle = this.penColor;
ctx.lineWidth = this.penWidth;
ctx.lineCap = \"round\";
ctx.stroke();// stroke() 方法来绘制线条
this.startAxisX = stopAxisX;
this.startAxisY = stopAxisY;
}
<template>
<div id=\"canvas-broad\">
<canvas id=\"canvas\" :width=\"width\" :height=\"height\">浏览器不支持canvascanvas>
<j-tab-bar v-if=\"toolsTabList\"
:tabList=\"tabList\"
:showTab=\"showTab\">
<template v-slot:back-ground-color>
<div class=\"section\">
<span class=\"info\">设置背景颜色：span>
<input class=\"btn input-color\" type=\"color\" v-model=\"brackGroudColor\" />
div>
template>
<template v-slot:pen-color>
<div class=\"section\">
<span class=\"info\">选择画笔颜色：span>
<input class=\"btn input-color\" type=\"color\" v-model=\"penColor\" />
div>
template>
<template v-slot:eraser>
<div class=\"section\">
<span class=\"info\">选择橡皮擦：span>
<button class=\"btn colorBtn\" :style=\"\'background-color:\' + brackGroudColor + \';\'\" @click=\'setPenColor();\'>{{brackGroudColor}}button>
div>
<div class=\"section\">
<button class=\"btn\" @click=\"setBackGround()\">清空画布button>
div>
template>
<template v-slot:pen-size>
<div class=\"section\">
<span class=\"info\">选择画笔大小：span>
<progress :value=\"progressValue\"
style=\"cursor: pointer;\"
id=\"progress\"
max=\"1\"
:title=\"progressValue * 100 +\'%\'\"
@click=\"setPenWidth\">
progress>
<span style=\"margin-left: 0.3125rem;\">{{20 * progressValue}}pxspan>
div>
template>
<template v-slot:export>
<div class=\"section\">
<span class=\"info\">输出画板内容到下面的图片：span>
<button class=\"btn\" @click=\"createImage();\">EXPORTbutton>
div>
<img id=\"image_png\">
template>
j-tab-bar>
<template v-if=\"!toolsTabList\">
<div class=\"section\">
<button class=\"btn\" @click=\"setBackGround()\">清空画布button>
div>
<div class=\"section\">
<span class=\"info\">选择画笔颜色：span>
<input class=\"input-color\" type=\"color\" v-model=\"penColor\" />
div>
<div class=\"section\">
<span class=\"info\">设置背景颜色：span>
<input class=\"input-color\" type=\"color\" v-model=\"brackGroudColor\" />
div>
<div class=\"section\">
<span class=\"info\">选择橡皮擦：span>
<button class=\"btn colorBtn\" :style=\"\'background-color:\' + brackGroudColor + \';\'\" @click=\'setPenColor();\'>{{brackGroudColor}}button>
div>
<div class=\"section\">
<span class=\"info\">选择画笔大小：span>
<progress :value=\"progressValue\"
style=\"cursor: pointer;\"
id=\"progress\"
max=\"1\"
:title=\"progressValue * 100 +\'%\'\"
@click=\"setPenWidth\">
progress>
<span style=\"margin-left: 0.3125rem;\">{{20 * progressValue}}pxspan>
div>
<div class=\"section\">
<span class=\"info\">输出画板内容到下面的图片：span>
<button class=\"btn\" @click=\"createImage();\">EXPORTbutton>
div>
<img id=\"image_png\">
template>
div>
template>
<script>
import JTabBar from \'../../pagesTools/JTabBar.vue\';
export default{
name:\'JCanvasBroad\',
props:{
height:{
type:Number,
default:-1
},
width:{
type:Number,
default:-1
},
defaultPenColor:{
type:String,
default:\'#000000\'
},
defaultPenSize:{
type:Number,
default:4
},
defaultBackGroundColor:{
type:String,
default:\"#ffffff\"
},
toolsTabList:{
type:Boolean,
default:false
}
},
components:{
JTabBar
},
watch:{
brackGroudColor:{
handler(newVal,oldVal){
this.setBackGround();
}
}
},
data() {
return{
penColor:\"#000000\",
penWidth:4,
penClick:false,
startAxisX:0,
startAxisY:0,
brackGroudColor:\"#ffffff\",
progressValue:0.2,
tabList:[{
label:\'背景颜色\',
id:\'back-ground-color\'
},{
label:\'画笔颜色\',
id:\'pen-color\'
},{
label:\'橡皮擦\',
id:\'eraser\'
},{
label:\'画笔大小\',
id:\'pen-size\'
},{
label:\'导出图片\',
id:\'export\'
}],
showTab:0
}
},
created(){
},
mounted() {
this.init();
},
methods:{
//页面初始化
init(){
let height = this.height;
let width = this.width;
if(width == -1){
const cbw = document.getElementById(\'canvas-broad\');
width = cbw.offsetWidth * 0.9;
height = cbw.offsetHeight * 0.6;
this.width = width;
this.height = height;
}
this.penColor = this.defaultPenColor;
this.brackGroudColor = this.defaultBackGroundColor;
this.penWidth = this.defaultPenSize;
let canvas = document.getElementById(\'canvas\'); //获取canvas标签
let ctx = canvas.getContext(\"2d\");//创建 context 对象
ctx.fillStyle = this.brackGroudColor;//画布背景色
ctx.fillRect(0,0,width,height);//在画布上绘制 width * height 的矩形，从左上角开始 (0,0)
canvas.addEventListener(\"mousemove\",this.drawing); //鼠标移动事件
canvas.addEventListener(\"mousedown\",this.penDown); //鼠标按下事件
canvas.addEventListener(\"mouseup\",this.penUp); //鼠标弹起事件
},
getWidthSelect(width){
if(width == this.penWidth){
return \"btn bg penBtn fw\"
}
return \"btn bg penBtn\"
},
getColorSelect(color){
if(color == this.penColor){
return \'btn colorBtn fw\'
}
return \'btn colorBtn\';
},
setBackGround(){
const canvas = document.getElementById(\'canvas\'); //获取canvas标签
const ctx = canvas.getContext(\"2d\");//创建 context 对象
ctx.fillStyle = this.brackGroudColor;//画布背景色
ctx.fillRect(0,0,this.width,this.height);//在画布上绘制 600x300 的矩形，从左上角开始 (0,0)
},
setPenWidth(event){
const progress = document.getElementById(\'progress\');
this.progressValue = (event.pageX - progress.offsetLeft) / progress.offsetWidth;
this.penWidth = 20 * this.progressValue;
},
//设置画笔颜色
setPenColor(color = \'\'){
if(color == \'\') this.penColor = this.brackGroudColor;
else this.penColor = color;
},
penDown(event){
this.penClick = true;
this.startAxisX = event.pageX;
this.startAxisY = event.pageY;
},
penUp(){
this.penClick = false;
},
drawing(event){
if(!this.penClick) return;
const canvas = document.getElementById(\'canvas\'); //获取canvas标签
const ctx = canvas.getContext(\"2d\");//创建 contextconst canvas = document.getElementById(\'canvas\'); 对象
const stopAxisX = event.pageX;
const stopAxisY = event.pageY;
const left = document.getElementById(\'leftMenu\');
const lw = left && left.offsetWidth ? (left.offsetWidth || 0) / 2 : 0;
ctx.beginPath();
const wsaW = window.screen.availWidth;
const cl = canvas.offsetLeft;
const ct = canvas.offsetTop;
ctx.moveTo(this.startAxisX-cl,this.startAxisY - ct);//moveTo(x,y) 定义线条开始坐标
ctx.lineTo(stopAxisX-cl,stopAxisY - ct );//lineTo(x,y) 定义线条结束坐标
ctx.strokeStyle = this.penColor;
ctx.lineWidth = this.penWidth;
ctx.lineCap = \"round\";
ctx.stroke();// stroke() 方法来绘制线条
this.startAxisX = stopAxisX;
this.startAxisY = stopAxisY;
},
createImage() {
const canvas = document.getElementById(\'canvas\'); //获取canvas标签
const img_png_src = canvas.toDataURL(\"image/png\"); //将画板保存为图片格式的函数
document.getElementById(\"image_png\").src = img_png_src;
}
}
}
script>
<style lang=\"scss\" scoped=\"scoped\">
*{
margin: 0;
padding: 0;
}
#canvas-broad{
margin: 0 auto;
/*text-align: center;*/
}
#canvas{
border: 2px solid #ff6700;
cursor:crosshair;
/*不能用这种方式给canvas设置宽高*/
/*width: 600px;*/
/*height: 300px;*/
}
.btn{
width:70px;
height: 40px;
border-radius: 10px;
border: 1px solid #aaa;/*去掉
outline:none;/*去掉
cursor: pointer;
}
.input-color{
width:70px;
height: 40px;
border-radius: 10px;
border: 0;/*去掉
outline:none;/*去掉
}
#image_png{
width: 300px;
height: 150px;
border: 2px solid #ff6700;
display: block;
margin: 10px auto;
}
.section{
margin-top: 10px;
}
.info{
color: #f0f;
font-size: 14px;
line-height: 40px;
}
.bg{
background: #ff6700;
}
.fw{
font-weight: 700;
}
style>
<template>
<div class=\"j-tab-bar\">
<div class=\"bar-items\">
<div v-for=\"(item,index) in tabList\"
:key=\"item.id\"
:class=\"getBarClass(index,\'bar-item\')\"
:title=\"item.label\"
@click=\"barClick(index)\">
{{item.label}}
div>
div>
<div v-for=\"(item,index) in tabList\"
:key=\"item.id\"
>
<slot v-if=\"item.id == tabList[showTab].id\"
:name=\"item.id\">
slot>
div>
div>
template>
<script>
export default{
name:\"JTabBar\",
props:{
tabList:{
type:Array,
default:[
{
label:\'tab\',
id:\'tab\'
},
{
label:\'tab1\',
id:\'tab1\'
}
]
},
defaultShowTab:{
type:Number,
default:0
}
},
data() {
return{
showTab:0
}
},
created() {
this.init();
},
methods:{
init(){
this.showTab = this.defaultShowTab;
},
barClick(index){
this.showTab = index;
this.$emit(\'clickTab\',index);
},
getBarClass(index,val=\'\'){
let res = \'\';
if(index == this.showTab){
res += \'active-tab\';
}
return res + \' \' + val;
}
}
}
script>
<style lang=\"scss\" scoped=\"scoped\">
.j-tab-bar{
.bar-items{
display: flex;
flex-direction: row;
line-height: 2rem;
.bar-item{
flex: 1;
color: black;
border: 1px solid deepskyblue;
cursor: pointer;
}
.active-tab{
color: cadetblue;
}
}
}
style>
组件以上传到npm，可以直接install使用
npm i @jyeontu/jvuewheel -S
//引入组件库
import jvuewheel from \'@jyeontu/jvuewheel\'
//引入样式
import \'@jyeontu/jvuewheel/lib/jvuewhell.css\'
Vue.use(jvuewheel);
<j-canvas-broad class = \"canvas-baroad\"
:toolsTabList = \"true\">
j-canvas-broad>
文档地址：http://120.79.163.94/JYeontuComponents/#/homePage
Gitee：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/JYeontuComponentWarehouse
MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D