bianyaqi
2 years ago
2 changed files with 16 additions and 424 deletions
@ -1,423 +1,13 @@ |
|||||
<template> |
<template> |
||||
<div class="home"> |
|
||||
<Layout> |
|
||||
<Header v-if="show"> |
|
||||
<!-- 导入 --> |
|
||||
<import-JSON /> |
|
||||
|
|
||||
<import-svg /> |
|
||||
|
|
||||
<import-img /> |
|
||||
|
|
||||
<!-- 对齐方式 --> |
|
||||
<align /> |
|
||||
|
|
||||
<flip /> |
|
||||
|
|
||||
<center-align /> |
|
||||
|
|
||||
<group /> |
|
||||
|
|
||||
<zoom /> |
|
||||
|
|
||||
<lock /> |
|
||||
|
|
||||
<dele /> |
|
||||
|
|
||||
<clone /> |
|
||||
|
|
||||
<div style="float:right"> |
|
||||
<save /> |
|
||||
</div> |
|
||||
</Header> |
|
||||
<Content style=" display: flex; height: calc(100vh - 64px);"> |
|
||||
<div style="width: 380px; height: 100%; background:#fff; display: flex"> |
|
||||
<Menu :active-name="menuActive" accordion width="80px" @on-select="activeIndex => menuActive = activeIndex"> |
|
||||
<MenuItem :name="1" style="padding:10px"><Icon type="md-book" />模板</MenuItem> |
|
||||
<MenuItem :name="2" style="padding:10px"><Icon type="md-create" />元素</MenuItem> |
|
||||
<MenuItem :name="3" style="padding:10px"><Icon type="ios-build" />背景</MenuItem> |
|
||||
<MenuItem :name="4" style="padding:10px"><Icon type="ios-build" />画笔</MenuItem> |
|
||||
</Menu> |
|
||||
<div class="content"> |
|
||||
<template v-if="show"> |
|
||||
<!-- 生成模板 --> |
|
||||
<div v-show="menuActive === 1" class="left-panel"> |
|
||||
<import-tmpl /> |
|
||||
</div> |
|
||||
<!-- 常用元素 --> |
|
||||
<div v-show="menuActive === 2" class="left-panel"> |
|
||||
<tools /> |
|
||||
<svgEl /> |
|
||||
</div> |
|
||||
<!-- 背景设置 --> |
|
||||
<div v-show="menuActive === 3" class="left-panel"> |
|
||||
<set-size /> |
|
||||
<bg-bar /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<!-- 画笔设置 --> |
|
||||
<div v-show="menuActive === 4"> |
|
||||
<div style="display: inline-block; margin-left: 10px"> |
|
||||
<button id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br> |
|
||||
<button id="clear-canvas" class="btn btn-info">Clear</button><br> |
|
||||
|
|
||||
<div id="drawing-mode-options"> |
|
||||
<label for="drawing-mode-selector">Mode:</label> |
|
||||
<select id="drawing-mode-selector"> |
|
||||
<option>Pencil</option> |
|
||||
<option>Circle</option> |
|
||||
<option>Spray</option> |
|
||||
<option>Pattern</option> |
|
||||
|
|
||||
<option>hline</option> |
|
||||
<option>vline</option> |
|
||||
<option>square</option> |
|
||||
<option>diamond</option> |
|
||||
<option>texture</option> |
|
||||
</select><br> |
|
||||
|
|
||||
<label for="drawing-line-width">Line width:</label> |
|
||||
<span class="info">30</span><input id="drawing-line-width" type="range" value="30" min="0" max="150"><br> |
|
||||
|
|
||||
<label for="drawing-color">Line color:</label> |
|
||||
<input id="drawing-color" type="color" value="#005E7A"><br> |
|
||||
|
|
||||
<label for="drawing-shadow-color">Shadow color:</label> |
|
||||
<input id="drawing-shadow-color" type="color" value="#005E7A"><br> |
|
||||
|
|
||||
<label for="drawing-shadow-width">Shadow width:</label> |
|
||||
<span class="info">0</span><input id="drawing-shadow-width" type="range" value="0" min="0" max="50"><br> |
|
||||
|
|
||||
<label for="drawing-shadow-offset">Shadow offset:</label> |
|
||||
<span class="info">0</span><input id="drawing-shadow-offset" type="range" value="0" min="0" max="50"><br> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 画布区域 --> |
|
||||
<div style="width: 100%;position: relative; background:#F1F1F1;"> |
|
||||
<div class="canvas-box"> |
|
||||
<canvas id="canvas" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 属性区域 --> |
|
||||
<div style="width: 380px; height: 100%; padding:10px; overflow-y: auto; background:#fff"> |
|
||||
<history v-if="show" /> |
|
||||
<layer v-if="show" /> |
|
||||
<attribute v-if="show" /> |
|
||||
</div> |
|
||||
</Content> |
|
||||
</Layout> |
|
||||
</div> |
|
||||
|
<div /> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
// 导入元素 |
|
||||
import importJSON from '@/components/img-editor/importJSON.vue' |
|
||||
import importSvg from '@/components/img-editor/importSvg.vue' |
|
||||
import importImg from '@/components/img-editor/importImg.vue' |
|
||||
|
|
||||
// 顶部组件 |
|
||||
import align from '@/components/img-editor/align.vue' |
|
||||
import centerAlign from '@/components/img-editor/centerAlign.vue' |
|
||||
import flip from '@/components/img-editor/flip.vue' |
|
||||
import save from '@/components/img-editor/save.vue' |
|
||||
import clone from '@/components/img-editor/clone.vue' |
|
||||
import group from '@/components/img-editor/group.vue' |
|
||||
import zoom from '@/components/img-editor/zoom.vue' |
|
||||
import lock from '@/components/img-editor/lock.vue' |
|
||||
import dele from '@/components/img-editor/del.vue' |
|
||||
|
|
||||
// 左侧组件 |
|
||||
import importTmpl from '@/components/img-editor/importTmpl.vue' |
|
||||
import tools from '@/components/img-editor/tools.vue' |
|
||||
import svgEl from '@/components/img-editor/svgEl.vue' |
|
||||
import bgBar from '@/components/img-editor/bgBar.vue' |
|
||||
import setSize from '@/components/img-editor/setSize.vue' |
|
||||
import brush from '@/components/img-editor/brush' |
|
||||
|
|
||||
// 右侧组件 |
|
||||
import history from '@/components/img-editor/history.vue' |
|
||||
import layer from '@/components/img-editor/layer.vue' |
|
||||
import attribute from '@/components/img-editor/attribute.vue' |
|
||||
|
|
||||
// 功能组件 |
|
||||
import EventHandle from '@/utils/eventHandler' |
|
||||
|
|
||||
import { fabric } from 'fabric' |
|
||||
|
|
||||
// 对齐辅助线 |
|
||||
import initAligningGuidelines from '@/core/initAligningGuidelines' |
|
||||
import initHotkeys from '@/core/initHotKeys' |
|
||||
import initControls from '@/core/initControls' |
|
||||
|
|
||||
const event = new EventHandle() |
|
||||
const canvas = {} |
|
||||
export default { |
export default { |
||||
name: 'HomeView', |
|
||||
provide: { |
|
||||
canvas, |
|
||||
fabric, |
|
||||
event |
|
||||
}, |
|
||||
components: { |
|
||||
setSize, tools, bgBar, lock, layer, align, attribute, dele, importSvg, save, importJSON, clone, flip, importImg, importTmpl, centerAlign, group, zoom, svgEl, history |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
menuActive: 4, |
|
||||
show: false, |
|
||||
select: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// this.$Spin.show() |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.canvas = canvas.c = new fabric.Canvas('canvas', { |
|
||||
isDrawingMode: true |
|
||||
}) |
|
||||
// console.log(this.canvas) |
|
||||
this.canvas.set('backgroundColor', '#fff') |
|
||||
this.show = true |
|
||||
this.$Spin.hide() |
|
||||
event.init(canvas.c) |
|
||||
initAligningGuidelines(canvas.c) |
|
||||
initHotkeys(canvas.c) |
|
||||
initControls(canvas.c) |
|
||||
this.setBrush() |
|
||||
}, |
|
||||
methods: { |
|
||||
setBrush() { |
|
||||
var $ = function(id) { return document.getElementById(id) } |
|
||||
var canvas = this.canvas |
|
||||
fabric.Object.prototype.transparentCorners = false |
|
||||
|
|
||||
var drawingModeEl = $('drawing-mode') |
|
||||
var drawingOptionsEl = $('drawing-mode-options') |
|
||||
var drawingColorEl = $('drawing-color') |
|
||||
var drawingShadowColorEl = $('drawing-shadow-color') |
|
||||
var drawingLineWidthEl = $('drawing-line-width') |
|
||||
var drawingShadowWidth = $('drawing-shadow-width') |
|
||||
var drawingShadowOffset = $('drawing-shadow-offset') |
|
||||
var clearEl = $('clear-canvas') |
|
||||
|
|
||||
clearEl.onclick = function() { canvas.clear() } |
|
||||
|
|
||||
drawingModeEl.onclick = function() { |
|
||||
canvas.isDrawingMode = !canvas.isDrawingMode |
|
||||
if (canvas.isDrawingMode) { |
|
||||
drawingModeEl.innerHTML = 'Cancel drawing mode' |
|
||||
drawingOptionsEl.style.display = '' |
|
||||
} else { |
|
||||
drawingModeEl.innerHTML = 'Enter drawing mode' |
|
||||
drawingOptionsEl.style.display = 'none' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
if (fabric.PatternBrush) { |
|
||||
var vLinePatternBrush = new fabric.PatternBrush(canvas) |
|
||||
vLinePatternBrush.getPatternSrc = function() { |
|
||||
var patternCanvas = fabric.document.createElement('canvas') |
|
||||
patternCanvas.width = patternCanvas.height = 10 |
|
||||
var ctx = patternCanvas.getContext('2d') |
|
||||
|
|
||||
ctx.strokeStyle = this.color |
|
||||
ctx.lineWidth = 5 |
|
||||
ctx.beginPath() |
|
||||
ctx.moveTo(0, 5) |
|
||||
ctx.lineTo(10, 5) |
|
||||
ctx.closePath() |
|
||||
ctx.stroke() |
|
||||
|
|
||||
return patternCanvas |
|
||||
} |
|
||||
|
|
||||
var hLinePatternBrush = new fabric.PatternBrush(canvas) |
|
||||
hLinePatternBrush.getPatternSrc = function() { |
|
||||
var patternCanvas = fabric.document.createElement('canvas') |
|
||||
patternCanvas.width = patternCanvas.height = 10 |
|
||||
var ctx = patternCanvas.getContext('2d') |
|
||||
|
|
||||
ctx.strokeStyle = this.color |
|
||||
ctx.lineWidth = 5 |
|
||||
ctx.beginPath() |
|
||||
ctx.moveTo(5, 0) |
|
||||
ctx.lineTo(5, 10) |
|
||||
ctx.closePath() |
|
||||
ctx.stroke() |
|
||||
|
|
||||
return patternCanvas |
|
||||
} |
|
||||
|
|
||||
var squarePatternBrush = new fabric.PatternBrush(canvas) |
|
||||
squarePatternBrush.getPatternSrc = function() { |
|
||||
var squareWidth = 10; var squareDistance = 2 |
|
||||
|
|
||||
var patternCanvas = fabric.document.createElement('canvas') |
|
||||
patternCanvas.width = patternCanvas.height = squareWidth + squareDistance |
|
||||
var ctx = patternCanvas.getContext('2d') |
|
||||
|
|
||||
ctx.fillStyle = this.color |
|
||||
ctx.fillRect(0, 0, squareWidth, squareWidth) |
|
||||
|
|
||||
return patternCanvas |
|
||||
} |
|
||||
|
|
||||
var diamondPatternBrush = new fabric.PatternBrush(canvas) |
|
||||
diamondPatternBrush.getPatternSrc = function() { |
|
||||
var squareWidth = 10; var squareDistance = 5 |
|
||||
var patternCanvas = fabric.document.createElement('canvas') |
|
||||
var rect = new fabric.Rect({ |
|
||||
width: squareWidth, |
|
||||
height: squareWidth, |
|
||||
angle: 45, |
|
||||
fill: this.color |
|
||||
}) |
|
||||
|
|
||||
var canvasWidth = rect.getBoundingRect().width |
|
||||
|
|
||||
patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance |
|
||||
rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 }) |
|
||||
|
|
||||
var ctx = patternCanvas.getContext('2d') |
|
||||
rect.render(ctx) |
|
||||
|
|
||||
return patternCanvas |
|
||||
} |
|
||||
|
|
||||
var img = new Image() |
|
||||
img.src = '../assets/honey_im_subtle.png' |
|
||||
|
|
||||
var texturePatternBrush = new fabric.PatternBrush(canvas) |
|
||||
texturePatternBrush.source = img |
|
||||
} |
|
||||
|
|
||||
$('drawing-mode-selector').onchange = function() { |
|
||||
if (this.value === 'hline') { |
|
||||
canvas.freeDrawingBrush = vLinePatternBrush |
|
||||
} else if (this.value === 'vline') { |
|
||||
canvas.freeDrawingBrush = hLinePatternBrush |
|
||||
} else if (this.value === 'square') { |
|
||||
canvas.freeDrawingBrush = squarePatternBrush |
|
||||
} else if (this.value === 'diamond') { |
|
||||
canvas.freeDrawingBrush = diamondPatternBrush |
|
||||
} else if (this.value === 'texture') { |
|
||||
canvas.freeDrawingBrush = texturePatternBrush |
|
||||
} else { |
|
||||
canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas) |
|
||||
} |
|
||||
|
|
||||
if (canvas.freeDrawingBrush) { |
|
||||
var brush = canvas.freeDrawingBrush |
|
||||
brush.color = drawingColorEl.value |
|
||||
if (brush.getPatternSrc) { |
|
||||
brush.source = brush.getPatternSrc.call(brush) |
|
||||
} |
|
||||
brush.width = parseInt(drawingLineWidthEl.value, 10) || 1 |
|
||||
brush.shadow = new fabric.Shadow({ |
|
||||
blur: parseInt(drawingShadowWidth.value, 10) || 0, |
|
||||
offsetX: 0, |
|
||||
offsetY: 0, |
|
||||
affectStroke: true, |
|
||||
color: drawingShadowColorEl.value |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
drawingColorEl.onchange = function() { |
|
||||
var brush = canvas.freeDrawingBrush |
|
||||
brush.color = this.value |
|
||||
if (brush.getPatternSrc) { |
|
||||
brush.source = brush.getPatternSrc.call(brush) |
|
||||
} |
|
||||
} |
|
||||
drawingShadowColorEl.onchange = function() { |
|
||||
canvas.freeDrawingBrush.shadow.color = this.value |
|
||||
} |
|
||||
drawingLineWidthEl.onchange = function() { |
|
||||
canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1 |
|
||||
this.previousSibling.innerHTML = this.value |
|
||||
} |
|
||||
drawingShadowWidth.onchange = function() { |
|
||||
canvas.freeDrawingBrush.shadow.blur = parseInt(this.value, 10) || 0 |
|
||||
this.previousSibling.innerHTML = this.value |
|
||||
} |
|
||||
drawingShadowOffset.onchange = function() { |
|
||||
canvas.freeDrawingBrush.shadow.offsetX = parseInt(this.value, 10) || 0 |
|
||||
canvas.freeDrawingBrush.shadow.offsetY = parseInt(this.value, 10) || 0 |
|
||||
this.previousSibling.innerHTML = this.value |
|
||||
} |
|
||||
|
|
||||
if (canvas.freeDrawingBrush) { |
|
||||
canvas.freeDrawingBrush.color = drawingColorEl.value |
|
||||
canvas.freeDrawingBrush.source = canvas.freeDrawingBrush.getPatternSrc.call(this) |
|
||||
canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1 |
|
||||
canvas.freeDrawingBrush.shadow = new fabric.Shadow({ |
|
||||
blur: parseInt(drawingShadowWidth.value, 10) || 0, |
|
||||
offsetX: 0, |
|
||||
offsetY: 0, |
|
||||
affectStroke: true, |
|
||||
color: drawingShadowColorEl.value |
|
||||
}) |
|
||||
} |
|
||||
var mainScriptEl = document.getElementById('main') |
|
||||
if (!mainScriptEl) return |
|
||||
var preEl = document.createElement('pre') |
|
||||
var codeEl = document.createElement('code') |
|
||||
codeEl.innerHTML = mainScriptEl.innerHTML |
|
||||
codeEl.className = 'language-javascript' |
|
||||
preEl.appendChild(codeEl) |
|
||||
document.getElementById('bd-wrapper').appendChild(preEl) |
|
||||
|
|
||||
window.addEventListener('load', function() { |
|
||||
var canvas = this.canvas |
|
||||
var canvases = this.__canvases || this.canvases |
|
||||
|
|
||||
canvas && canvas.calcOffset && canvas.calcOffset() |
|
||||
|
|
||||
if (canvases && canvases.length) { |
|
||||
for (var i = 0, len = canvases.length; i < len; i++) { |
|
||||
canvases[i].calcOffset() |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
name: 'Index' |
||||
} |
} |
||||
</script> |
</script> |
||||
<style lang="less" scoped> |
|
||||
|
|
||||
/deep/ .ivu-layout-header { |
|
||||
padding: 0 10px; |
|
||||
} |
|
||||
.home,.ivu-layout{ |
|
||||
height: 100vh; |
|
||||
} |
|
||||
.icon{ |
|
||||
display: block; |
|
||||
} |
|
||||
.canvas-box{ |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
} |
|
||||
#canvas{ |
|
||||
width: 300px; |
|
||||
height: 300px; |
|
||||
margin: 0 auto; |
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHUlEQVQ4jWNgYGAQIYAJglEDhoUBg9+FowbQ2gAARjwKARjtnN8AAAAASUVORK5CYII="); |
|
||||
background-size: 30px 30px; |
|
||||
} |
|
||||
.content{ |
|
||||
flex: 1; |
|
||||
width: 200px; |
|
||||
padding:10px; |
|
||||
padding-top: 0; |
|
||||
height: 100%; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
|
<style scoped> |
||||
|
|
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue