| | |
|---|
| | | <template> |
|---|
| | | <div class="paint"> |
|---|
| | | <canvas width="600" height="800" id="canvas"></canvas> |
|---|
| | | <canvas id="canvas" width="400" :height="canvasHeight"></canvas> |
|---|
| | | <!-- 操作按钮 --> |
|---|
| | | <ul class="paint-btn"> |
|---|
| | | <li class="btn-box"> |
|---|
| | | <li class="paint-btn-box"> |
|---|
| | | <button @click="changeDrawMode"> |
|---|
| | | {{ isDraw ? "框选模式" : "绘图模式" }} |
|---|
| | | </button> |
|---|
| | |
|---|
| | | type: Number, |
|---|
| | | default: 1, |
|---|
| | | }, |
|---|
| | | canvasHeight:{ |
|---|
| | | type:Number, |
|---|
| | | default:380 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init(); |
|---|
| | |
|---|
| | | this.canvas.renderAll.bind(this.canvas), |
|---|
| | | { |
|---|
| | | // 可以设置图像的样式，比如不透明度 |
|---|
| | | opacity: 0.5, |
|---|
| | | // opacity: 0.5, |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | // 渲染画布 |
|---|
| | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .paint { |
|---|
| | | margin-top: 20px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | #canvas { |
|---|
| | | border: 1px solid #ccc; |
|---|
| | | } |
|---|
| | | .paint-btn { |
|---|
| | | width: 96%; |
|---|
| | | margin-top:40px; |
|---|
| | | padding:20px; |
|---|
| | | border:1px solid #ededed; |
|---|
| | | width:max-content; |
|---|
| | | li { |
|---|
| | | margin-bottom:6px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .btn-box { |
|---|
| | | .paint-btn-box { |
|---|
| | | display:flex; |
|---|
| | | justify-content:space-between; |
|---|
| | | justify-content:space-evenly; |
|---|
| | | } |
|---|
| | | </style> |
|---|
