canvas를 이용한 backgroundImage에 rect 그리기

 ctx.drawImage(a, b, c, d, e, f, g, h, i)
 a:Background의 Image경로
 b: a이미지의 보여줄 x좌표 c: a이미지의 보여줄 y좌표
 d:0이면 이미지가 안나옴 e:0이면 이미지가 안나옴 값을 올리면 zoom기능 
     d를 높이면 이미지 가로가 길어지고 e를 낮추면 이미지 하단이 내려감, 1940, 1350
 f:프레임 x위치시점 g:프레임 y위치 시점
 h:화면에 보이는 widht i: 화면에 보이는 height

h,와 i의 경우 처음 시도 할때는 <canvas style="widht:200px; height:200px"> 이렇게 적용 했을때 canvas의 property에서 WIDTH와 HEIGHT를 가져 올때 defult값을 가지고 와서 고생을 했다. 이때 console.log를 찍어서 property를 확인해보면 clientWidth 와 clientHeight 값을 보면 해당 canvas의 widht와 height값을 자동으로 가지고 있다. 

canvas = this.$refs.canvas
ctx = canvas.getContext('2d')
canvas.height = canvas.clientHeight
canvas.width = canvas.clientWidth
this.HEIGHT = canvas.height
this.WIDTH = canvas.width

해당 구문에서 보면 canvas.height = canvas.clientHeight 와 canvas.width = canvas.clientWidth이구문이있는데 이렇게 해주지 않으면 옵션에 canvas.height와 canvas.width값이 default 값을 가지고 있어서 화면 마우스이동에 대한 이벤트 값을 제대로 가져오지 못했다.

해서 canvas.height = canvas.clientHeight 와 canvas.width = canvas.clientWidth값을 넣어주니 정상 작동을 했다. 이를 보면 ctx.strokeRect작업을 해줄때 자체적으로 canvas.height와 canvasWidth를 사용 한다는걸 알 수 있었다.

이미지의 크기가 고정이거나 변동 사항에 대해 큰 이슈가 없다면 canvas태그에 width와 height를 주면 상관이 없겠지만 수시로 변하는 이미지라면 clientWidth, Height를 나와 같이 작업을 해줘야 한다.

<template>
<div class="contentmetainput">
<div class="treeareage">
트리
</div>
<div class="metaareage" >
<div style="width: 85%;height:89%;float: left">
<ul style="width: 100%;height: 67%;margin-bottom: 2px;">
<canvas ref="canvas" style="width: 100%;height: 100%;border:1px solid;"></canvas>
</ul>
<ul style="margin-bottom: 2px;">
<div style="width: 100%;height: 30px;border: 1px solid lightcoral;text-align: center;font-weight: bold;">{{ this.pointeLocation }}</div>
</ul>
<ul style="width: 100%;height: 230px;border:1px solid black;margin-bottom: 2px;">
<div style="width: 100%;height: 110px;border: 1px solid lightcoral;">
<li v-for="(d, i) in fullList[this.selectRow].option" :key="i" v-if="i<10" @click="addObject(d)" style="float: left;width: 9.9%;background-color: #00b40b;margin-left: 1px;height: 100%;">
<img :src="d.imgurl" width="134px" height="108px" />
</li>
</div>
<div style="width: 100%;height: 110px;border: 1px solid lightcoral;margin-top: 8px;">
<li v-for="(d, i) in fullList[this.selectRow].option.slice(10)" :key="i" v-if="i<10" @click="addObject(d)" style="float: left;width: 9.9%;background-color: #00b40b;margin-left: 1px;height: 100%;">
<img :src="d.imgurl" width="134px" height="108px" />
</li>
</div>
</ul>
</div>
<div style="float: left;width: 14%;height:91%;border: 1px solid black;margin-left: 5px;">
<ag-grid-vue style="width:100%; height:100%" class="ag-theme-balham"
:gridOptions="gridOptions"
:columnDefs="columnDefs"
:rowData="fullList"
@grid-read="onGridReady"
@cellClicked="getSelectedRows">
</ag-grid-vue>
</div>
<div>
<ul style="margin: 0;">
<li class="treeli"><button>좌표저장</button></li>
<li style="float:left;width: 20%;margin-left: 2px;font-size: 13pt;height: 100%;text-align: center;font-weight: bold;padding-top: 55px;">현재 페이지 : 10 / 100</li>
<li class="treeli"><button>이전페이지</button></li>
<li class="treeli"><button>다음페이지</button></li>
<li class="treeli"><button>보간</button></li>
<li class="treeli"><button>미리보기</button></li>
<li class="treeli"><button>편집시작</button></li>
</ul>
</div>
</div>
</div>
</template>

<script>
let canvas
let ctx

export default {
data () {
return {
srcBackground: '',
contentOffsetX: 0,
contentOffsetY: 0,
contentHeight: 0,
contentWidth: 0,
inSrcBackground: '',
inContentOffsetX: 0,
inContentOffsetY: 0,
inContentWidth: 0,
inContentHeight: 0,
diffX: 0,
diffY: 0,
imageLoad: false,
WIDTH: 0,
HEIGHT: 0,
imgBackground: new Image(),
canvasValid: false,
drawObject: [],
mySel: null,
CIRCLE: '',
RECT: '',
IMAGE: '',
mySelLineWidth: 0,
mySelLineColor: '',
isDrag: false,
stylePaddingLeft: '',
stylePaddingTop: '',
styleBorderLeft: '',
styleBorderTop: '',
mx: 0,
my: 0,
selectRow: 0,
callbackPrintSelObjInfoFun: null,
type: 1,
objName: '',
pointeLocation: 'test location',
gridOptions: {
enableColResize: true,
animateRows: false,
rowSelection: 'single'
},
fullList: [
{objectName: 'flowerList1',
objectImage: require('@/asset/images/bg_fllow.jpg'),
option: [
{mvId: 'flower1', fx: 392, fy: 285, fw: 240, fh: 250, fill: 'red', ststyle: 'red', linew: 3, ftext: '1', imgurl: require('@/asset/images/f1/fm_1_1.jpg')},
{mvId: 'flower2', fx: 907, fy: 331, fw: 240, fh: 250, fill: 'red', ststyle: 'red', linew: 3, ftext: '2', imgurl: require('@/asset/images/f1/fm_1_2.jpg')},
{mvId: 'flower3', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_3.jpg')},
{mvId: 'flower4', fx: 1270, fy: 275, fw: 240, fh: 250, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_4.jpg')},
{mvId: 'flower5', fx: 0, fy: 591, fw: 180, fh: 120, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_5.jpg')},
{mvId: 'flower6', fx: 1656, fy: 102, fw: 100, fh: 100, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_6.jpg')},
{mvId: 'flower7', fx: 1119, fy: 69, fw: 100, fh: 120, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_7.jpg')},
{mvId: 'flower8', fx: 785, fy: 63, fw: 100, fh: 100, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_8.jpg')},
{mvId: 'flower9', fx: 0, fy: 0, fw: 200, fh: 200, fill: 'black', ststyle: 'black', linew: 3, ftext: '3', imgurl: require('@/asset/images/noImage.jpg')},
{mvId: 'flower10', fx: 0, fy: 0, fw: 200, fh: 200, fill: 'black', ststyle: 'black', linew: 3, ftext: '3', imgurl: require('@/asset/images/noImage.jpg')},
{mvId: 'flower11', fx: 1265, fy: 22, fw: 120, fh: 120, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_11.jpg')},
{mvId: 'flower12', fx: 623, fy: 387, fw: 110, fh: 110, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_12.jpg')},
{mvId: 'flower13', fx: 252, fy: 59, fw: 90, fh: 100, fill: 'red', ststyle: 'red', linew: 3, ftext: '3', imgurl: require('@/asset/images/f1/fm_1_13.jpg')}
]
},
{objectName: 'flowerList2',
objectImage: require('@/asset/images/bg_fllow.jpg'),
option: [
{mvId: 'flower11', fx: 392, fy: 285, fw: 240, fh: 250, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '1', imgurl: require('@/asset/images/f2/fm_2_1.jpg')},
{mvId: 'flower22', fx: 907, fy: 331, fw: 240, fh: 250, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '2', imgurl: require('@/asset/images/f2/fm_2_2.jpg')},
{mvId: 'flower33', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_3.jpg')},
{mvId: 'flower44', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_4.jpg')},
{mvId: 'flower55', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_5.jpg')},
{mvId: 'flower66', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_6.jpg')},
{mvId: 'flower77', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_7.jpg')},
{mvId: 'flower88', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_8.jpg')},
{mvId: 'flower99', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/noImage.jpg')},
{mvId: 'flower110', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/noImage.jpg')},
{mvId: 'flower111', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_11.jpg')},
{mvId: 'flower112', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'blue', ststyle: 'blue', linew: 3, ftext: '3', imgurl: require('@/asset/images/f2/fm_2_12.jpg')}
]
},
{objectName: 'flowerList3',
objectImage: require('@/asset/images/bg_fllow.jpg'),
option: [
{mvId: 'flower111', fx: 392, fy: 285, fw: 240, fh: 250, fill: 'green', ststyle: 'green', linew: 3, ftext: '1', imgurl: require('@/asset/images/f3/fm_3_1.jpg')},
{mvId: 'flower222', fx: 907, fy: 331, fw: 240, fh: 250, fill: 'green', ststyle: 'green', linew: 3, ftext: '2', imgurl: require('@/asset/images/f3/fm_3_2.jpg')},
{mvId: 'flower333', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_3.jpg')},
{mvId: 'flower444', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_4.jpg')},
{mvId: 'flower555', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_5.jpg')},
{mvId: 'flower666', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/noImage.jpg')},
{mvId: 'flower777', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/noImage.jpg')},
{mvId: 'flower888', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_6.jpg')},
{mvId: 'flower999', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_7.jpg')},
{mvId: 'flower1110', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_8.jpg')},
{mvId: 'flower1111', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_9.jpg')},
{mvId: 'flower1113', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_10.jpg')},
{mvId: 'flower1114', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_11.jpg')},
{mvId: 'flower1115', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_12.jpg')},
{mvId: 'flower1116', fx: 1546, fy: 68, fw: 100, fh: 100, fill: 'green', ststyle: 'green', linew: 3, ftext: '3', imgurl: require('@/asset/images/f3/fm_3_13.jpg')}
]
}
]
}
},
methods: {
onGridReady (params) {
this.gridApi = params.api
this.columnApi = params.columnApi
},
getSelectedRows (params) {
this.selectRow = params.rowIndex
this.canvasView()
},
setBackground () {
this.srcBackground = this.inSrcBackground
this.contentOffsetX = this.inContentOffsetX
this.contentOffsetY = this.inContentOffsetY
this.contentWidth = this.inContentWidth
this.contentHeight = this.inContentHeight
this.diffX = (this.contentWidth) / this.WIDTH
this.diffY = (this.contentHeight) / this.HEIGHT
this.imageLoad = false

this.imgBackground.src = this.srcBackground
canvas = this.$refs.canvas
ctx = canvas.getContext('2d')

this.imgBackground.onload = () => {
this.clearCanvas(ctx)
this.backgroundDraw(ctx)
this.draw()
// ctx.drawImage(this.imgBackground, this.contentOffsetX, this.contentOffsetY, this.inContentWidth, this.inContentHeight, 0, 0, 310, 180)
// b:보여줄 이미지의 x좌표 c:보여줄 이미지의 y좌표
// d:0이면 이미지가 안나옴 e:0이면 이미지가 안나옴 값을 올리면 zoom기능 d를 높이면 이미지 가로가 길어지고 e를 낮추면 이미지 하단이 내려감, 1940, 1350
// f:프레임 x위치시점 g:프레임 y위치 시점
// h:화면에 보이는 widht i: 화면에 보이는 height
}
},
clearCanvas (ctx) {
if (this.CIRCLE !== '' && this.RECT !== '') {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
},
backgroundDraw (ctx) {
ctx.drawImage(this.imgBackground, this.contentOffsetX, this.contentOffsetY, this.contentWidth, this.contentHeight, 0, 0, this.WIDTH, this.HEIGHT)
},
draw () {
if (this.canvasValid === false) {
this.clearCanvas(ctx)
this.backgroundDraw(ctx)

let l = this.drawObject.length
for (let i = 0; i < l; i++) {
this.shapeDraw(ctx, this.drawObject[i])
}

if (this.mySel !== null) {
if (this.mySel.type === this.CIRCLE) {
ctx.beginPath()
ctx.arc((this.mySel.x - this.contentOffsetX) / this.diffX
, (this.mySel.y - this.contentOffsetY) / this.diffY
, this.mySel.hw / this.diffX, 0, (Math.PI / 180) * 360, false)

ctx.lineWidth = this.mySelLineWidth
ctx.strokeStyle = this.mySelLineColor
ctx.stroke()
} else if (this.mySel.type === this.RECT) {
ctx.lineWidth = this.mySelLineWidth
ctx.strokeStyle = this.mySelLineColor
ctx.strokeRect((this.mySel.x - this.contentOffsetX) / this.diffX, (this.mySel.y - this.contentOffsetY) / this.diffY, this.mySel.w / this.diffX, this.mySel.h / this.diffY)
} else {
console.log('=================미구현=================')
}
}

this.canvasValid = true
}
},
shapeDraw (ctx, drawObject) {
if (drawObject.type === this.CIRCLE) {
ctx.beginPath()
ctx.arc((drawObject.x - this.contentOffsetX) / this.diffX
, (drawObject.y - this.contentOffsetY) / this.diffY
, (drawObject.hw / this.diffX, 0, (Math.PI / 180) * 360, false))
ctx.closePath()
ctx.fillStyle = drawObject.fill
ctx.fill()
ctx.font = (drawObject.hw / this.diffX) + 'px Arial bold'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillStyle = 'white'
ctx.fillText(drawObject.text
, (drawObject.x - this.contentOffsetX) / this.diffX
, (drawObject.y - this.contentOffsetY) / this.diffY)
} else if (drawObject.type === this.RECT) {
ctx.strokeStyle = drawObject.strokeStyle
ctx.lineWidth = drawObject.lineWidth
ctx.strokeRect((drawObject.x - this.contentOffsetX) / this.diffX
, (drawObject.y - this.contentOffsetY) / this.diffY
, drawObject.w / this.diffX, drawObject.h / this.diffY)
} else {
alert('객체 type error')
return false
}

if (this.mySel !== null) {
// callbackPrintSelObjInfoFun(this.mySel);
this.pointeLocation = 'X mySel: ' + this.mySel.x + ' - Y mySel :' + this.mySel.y + ' - W mySel: ' + this.mySel.w + ' - H mySel :' + this.mySel.h + ' - mx: ' + this.mx + ' - my :' + this.my
}
},
initCanvas () {
this.mySelLineColor = 'yellow'
this.mySelLineWidth = 5

canvas = this.$refs.canvas
ctx = canvas.getContext('2d')
canvas.height = canvas.clientHeight
canvas.width = canvas.clientWidth
this.HEIGHT = canvas.height
this.WIDTH = canvas.width
this.isDrag = false
this.canvasValid = false
// canvas 객체 및 canvas context 설정 및 속설 설정 -- 종료

// canvas의 모든 객체 초기화(삭제)
this.drawObject = []
this.mySel = null

// canvas 초기화
this.clearCanvas(ctx)
// fixes a problem where double clicking causes text to get selected on the canvas
canvas.onselectstart = () => { return false }

// fixes mouse co-ordinate problems when there's a border or padding
// see getMouse for more detail
if (document.defaultView && document.defaultView.getComputedStyle) {
this.stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0
this.stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0
this.styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0
this.styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0
}

// make draw() fire every INTERVAL milliseconds.
// setInterval(draw, INTERVAL);

// add our events. Up and down are for dragging,
// double click is for making new drawObject
canvas.onmousedown = this.mouseDown
canvas.onmouseup = this.mouseUp
canvas.onmouseout = this.mouseOut
},
mouseDown (e) {
this.getMouse(e)
// run through all the drawObject
let l = this.drawObject.length - 1
for (let i = l; i >= 0; i--) {
if (this.isPointInRectangle(this.mx, this.my, this.drawObject[i])) {
this.mySel = this.drawObject[i]
this.offsetx = this.mx - this.mySel.x
this.offsety = this.my - this.mySel.y
this.mySel.x = this.mx - this.offsetx
this.mySel.y = this.my - this.offsety

this.isDrag = true
canvas.onmousemove = this.mouseMove
return false
}
}
// havent returned means we have selected nothing
this.mySel = null
},
getMouse (e) {
this.mx = e.offsetX * this.diffX + this.contentOffsetX
this.my = e.offsetY * this.diffY + this.contentOffsetY
},
isPointInRectangle (x, y, drawObject) {
if (drawObject.type === this.CIRCLE) {
return (x > drawObject.x - drawObject.hw && x < drawObject.x + drawObject.hw && y > drawObject.y - drawObject.hw && y < drawObject.y + drawObject.hw)
} else if (drawObject.type === this.RECT) {
return (x > drawObject.x && x < drawObject.x + drawObject.w && y > drawObject.y && y < drawObject.y + drawObject.h)
}
},
mouseMove (e) {
if (this.isDrag) {
this.getMouse(e)
this.mySel.x = this.mx - this.offsetx
this.mySel.y = this.my - this.offsety

if (this.mySel !== null) {
if (this.mySel.x - this.contentOffsetX <= 0) {
this.mySel.x = this.contentOffsetX
}
if (this.mySel.y - this.contentOffsetY <= 0) {
this.mySel.y = this.contentOffsetY
}

if (this.mySel.type === this.CIRCLE) {
if (this.mySel.y - this.contentOffsetY >= this.HEIGHT * this.diffY) {
this.mySel.y = this.HEIGHT * this.diffY + this.contentOffsetY
}

if (this.mySel.x - this.contentOffsetX >= this.WIDTH * this.diffX) {
this.mySel.x = this.WIDTH * this.diffX + this.contentOffsetX
}
} else {
if (this.mySel.y - this.contentOffsetY + this.mySel.h >= this.HEIGHT * this.diffY) {
this.mySel.y = this.HEIGHT * this.diffY - this.mySel.h + this.contentOffsetY
}

if (this.mySel.x - this.contentOffsetX + this.mySel.w >= this.WIDTH * this.diffX) {
this.mySel.x = this.WIDTH * this.diffX - this.mySel.w + this.contentOffsetX
}
}
}
// something is changing position so we better invalidate the canvas!
this.invalidate()
}
},
mouseUp () {
this.isDrag = false
canvas.onmousemove = null
},
mouseOut () {
this.mouseUp()
if (this.mySel !== null) {
if (this.mySel.x - this.contentOffsetX <= 0) {
this.mySel.x = this.contentOffsetX
}

if (this.mySel.y - this.contentOffsetY <= 0) {
this.mySel.y = this.contentOffsetY
}
if (this.mySel.type === this.CIRCLE) {
if (this.mySel.y - this.contentOffsetY >= this.HEIGHT * this.diffY) {
this.mySel.y = this.HEIGHT * this.diffY + this.contentOffsetY
}
if (this.mySel.x - this.contentOffsetX >= this.WIDTH * this.diffX) {
this.mySel.x = this.WIDTH * this.diffX + this.contentOffsetX
}
} else {
if (this.mySel.y - this.contentOffsetY + this.mySel.h >= this.HEIGHT * this.diffY) {
this.mySel.y = this.HEIGHT * this.diffY + this.contentOffsetY - this.mySel.h
}
if (this.mySel.x - this.contentOffsetX + this.mySel.w >= this.WIDTH * this.diffX) {
this.mySel.x = this.WIDTH * this.diffX + this.contentOffsetX - this.mySel.w
}
}
this.invalidate()
}
},
invalidate () {
this.draw()
this.canvasValid = false
},
canvasView () {
this.initCanvas()
this.inContentOffsetX = 0 // 4960
this.inContentOffsetY = 0 // 640
this.inContentWidth = 1920
this.inContentHeight = 1080
this.inSrcBackground = this.fullList[this.selectRow].objectImage
this.setBackground()
},
addObject (params) {
this.RECT = 'rect'
this.canvasValid = false
// console.log(' params.fx : ' + params.fx + ' params.fy : ' + params.fy + ' params.fw : ' + params.fw + ' params.fh : ' + params.fh + ' params.fill : ' + params.fill + ' params.ststyle : ' + params.ststyle)
this.pointeLocation = 'X mySel: ' + params.fx + ' - Y mySel :' + params.fy + ' - W mySel: ' + params.fw + ' - H mySel :' + params.fh + ' - mx: ' + this.mx + ' - my :' + this.my
this.addObjectRect(params.fx, params.fy, params.fw, params.fh, params.fill, params.ststyle, params.linew, params.ftext)
},
addObjectRect (x, y, w, h, fill, strokeStyle, lineWidth, text) {
let objectRect = {
x: x,
y: y,
w: w,
h: h,
fill: fill,
strokeStyle: strokeStyle,
lineWidth: lineWidth,
type: this.RECT,
text: text
}

this.drawObject.push(objectRect)
this.invalidate()
},
addObjectCircle (x, y, hw, fill, strokeStyle, lineWidth, text) {
let objectCircle = {
x: x,
y: y,
w: hw * 2,
h: hw * 2,
fill: fill,
strokeStyle: strokeStyle,
lineWidth: lineWidth,
type: this.CIRCLE,
text: text
}
this.drawObject.push(objectCircle)
this.invalidate()
}
},
mounted () {
this.canvasView()
this.selectRow = 0
},
computed: {
columnDefs () {
return [
{headerName: '목록', field: 'objectName', sortable: true}
]
}
}
}
</script>
<style scoped>
html, body {
margin:0;
height:100%;
overflow: hidden;
}
.treeareage {
float: left;
width:300px;
height: 850px;
margin: 0;
background-color: #9eabfd;
}
.metaareage{
float: left;
height: 850px;
width: 1610px;
background-color: #9eabfd;
margin-left: 10px;
}
.treeli{
float: left;
width: 13%;
margin: 0 2px 0 2px;
height: 100%;
line-height: 100%;
text-align: center;
}
.treeli button {
font-size: 15pt;
height: 40px;
margin-top: 35px;
}
.canvas {
border: 1px solid #000;
width: 100%;
height: 100%;
}
</style>

해당 내용은 내 기준이니 참고만 하시길 바란다.