Skip to content

N
new_house_image
提交 60492766 作者: 王磊
操作

添加双人床，单人床，部分浴缸

上级 687509bd
流水线 #10311 已失败 于阶段
正在显示 包含 206 行增加 和 118 行删除
src/canvas.js
...@@ -15,6 +15,8 @@ var rotateoffsetWidth, rotateoffsetHeight; ...@@ -15,6 +15,8 @@ var rotateoffsetWidth, rotateoffsetHeight;
var changeTrapezoid = new changeTrapezoidPlace() var changeTrapezoid = new changeTrapezoidPlace()
// 圆坐标改变 // 圆坐标改变
var Circle = new changeCircle() var Circle = new changeCircle()
function start() { function start() {
canvas = document.getElementById('give'); canvas = document.getElementById('give');
box = document.querySelectorAll('.sidebar .box') box = document.querySelectorAll('.sidebar .box')
...@@ -140,7 +142,6 @@ function start() { ...@@ -140,7 +142,6 @@ function start() {
// 物体移动改变形状 // 物体移动改变形状
if (storageMark !==null) { if (storageMark !==null) {
console.log(storageMark, 'storageMarkstorageMarkstorageMark')
// 整体移动 // 整体移动
if(storageMark.dir.indexOf("v") !== -1) { if(storageMark.dir.indexOf("v") !== -1) {
debug = false debug = false
...@@ -161,76 +162,43 @@ function start() { ...@@ -161,76 +162,43 @@ function start() {
} else { } else {
if(storageMark.dir.indexOf("e") !== -1) { if(storageMark.dir.indexOf("e") !== -1) {
// width // width
Circle.__proto__.circleRightWidth(storageMark, xMin, yMin) if (storageMark.name === 'public') {
console.log(1) Circle.__proto__.circleRightWidth(storageMark, xMin, yMin)
}
if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidRight(storageMark, xMin, yMin)
}
} }
if(storageMark.dir.indexOf("s") !== -1) { if(storageMark.dir.indexOf("s") !== -1) {
// height // height
Circle.__proto__.circleHeight(storageMark, xMin, yMin) if (storageMark.name === 'public') {
console.log(2) Circle.__proto__.circleHeight(storageMark, xMin, yMin)
}
if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidBottom(storageMark, xMin, yMin)
}
} }
if(storageMark.dir.indexOf("w") !== -1) { if(storageMark.dir.indexOf("w") !== -1) {
// width left // width left
Circle.__proto__.circleWidth(storageMark, xMin, yMin) if (storageMark.name === 'public') {
console.log(3) Circle.__proto__.circleWidth(storageMark, xMin, yMin)
}
if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidLeft(storageMark, xMin, yMin)
}
} }
if(storageMark.dir.indexOf("n") !== -1) { if(storageMark.dir.indexOf("n") !== -1) {
// top height // top height
Circle.__proto__.circleTopHeight(storageMark, xMin, yMin) if (storageMark.name === 'public') {
console.log(4) Circle.__proto__.circleTopHeight(storageMark, xMin, yMin)
}
if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidTopHeight(storageMark, xMin, yMin)
}
} }
} }
} }
// 左 or 左上
// if(storageMark.dir.indexOf("nw") !== -1) {
// debug = false
// // 梯形
// if (storageMark.name === 'Trapezoid') {
// changeTrapezoid.__proto__.trapezoidLeftTop(storageMark, xMin, yMin)
// }
// // 圆
// if (storageMark.name === 'arc') {
// Circle.__proto__.circleLeftTop(storageMark, xMin, yMin)
// }
// }
// // 左 or 左下
// if(storageMark.dir.indexOf("sw") !== -1) {
// debug = false
// // 梯形
// if (storageMark.name === 'Trapezoid') {
// changeTrapezoid.__proto__.trapezoidLeftBottom(storageMark, xMin, yMin)
// }
// // 圆
// if (storageMark.name === 'arc') {
// Circle.__proto__.circleLeftBottom(storageMark, xMin, yMin)
// }
// }
// // 右 or 右上
// if(storageMark.dir.indexOf("ne") !== -1) {
// debug = false
// // 梯形
// if (storageMark.name === 'Trapezoid') {
// changeTrapezoid.__proto__.trapezoidRightTop(storageMark, xMin, yMin)
// }
// // 圆
// if (storageMark.name === 'arc') {
// Circle.__proto__.circleRightTop(storageMark, xMin, yMin)
// }
// }
// // 右 or 右下
// if(storageMark.dir.indexOf("se") !== -1) {
// debug = false
// // 梯形
// if (storageMark.name === 'Trapezoid') {
// changeTrapezoid.__proto__.trapezoidRightBottom(storageMark, xMin, yMin)
// }
// // 圆
// if (storageMark.name === 'arc') {
// Circle.__proto__.circleRightBottom(storageMark, xMin, yMin)
// }
// }
} }
} }
// 获取要改变的dom // 获取要改变的dom
...@@ -262,18 +230,7 @@ function start() { ...@@ -262,18 +230,7 @@ function start() {
return dir return dir
} }
if (e.target.className === 'mouse-first') { if (e.target.className === 'mouse-first') {
// console.log(deg, "xxxxx")
dir = "nw" dir = "nw"
// if(deg === 0 || (deg > 350 && deg < 360)) {
// }
// if(deg > 335 && deg < 350) {
// dir = "w"
// } else if(deg > 225 && deg < 335) {
// dir = "sw"
// } else if(deg > 225 && deg < 245) {
// dir = "sw"
// }
} else if (e.target.className === 'mouse-second') { } else if (e.target.className === 'mouse-second') {
dir = "ne" dir = "ne"
} else if (e.target.className === 'mouse-third') { } else if (e.target.className === 'mouse-third') {
...@@ -304,13 +261,17 @@ function start() { ...@@ -304,13 +261,17 @@ function start() {
route.style.transform = `rotateZ(${parseInt(dis)}deg)` route.style.transform = `rotateZ(${parseInt(dis)}deg)`
let transform = window.getComputedStyle(route)['transform'], let transform = window.getComputedStyle(route)['transform'],
matrix = transform.slice(7, -1).split(',') matrix = transform.slice(7, -1).split(',')
console.log(transform, '矩阵2')
let rotateWidth = rotateoffsetHeight * matrix[1] + rotateoffsetWidth * matrix[0] let rotateWidth = rotateoffsetHeight * matrix[1] + rotateoffsetWidth * matrix[0]
let rotateHeight = rotateoffsetHeight * matrix[0] + rotateoffsetWidth * matrix[1] let rotateHeight = rotateoffsetHeight * matrix[0] + rotateoffsetWidth * matrix[1]
console.log(route.offsetLeft * matrix[0]+ route.offsetTop * matrix[2] + rotateWidth, 'xxxxxxxxxxx')
// console.log(Math.abs(rotateWidth), 'paddddddddddddd', Math.abs(rotateHeight)) // console.log(Math.abs(rotateWidth), 'paddddddddddddd', Math.abs(rotateHeight))
// storageMark.width = Math.abs(rotateWidth) // storageMark.width = Math.abs(rotateWidth)
// storageMark.height = Math.abs(rotateHeight) // storageMark.height = Math.abs(rotateHeight)
route.style.width = Math.abs(rotateWidth) + "px" // route.style.transform
route.style.height = Math.abs(rotateHeight) + "px" // route.style.width = Math.abs(rotateWidth) + "px"
// route.style.height = Math.abs(rotateHeight) + "px"
// transform: matrix(a,b,c,d,e,f);
} }
} }
// 计算两点的线在页面中的角度 // 计算两点的线在页面中的角度
......
src/changeImage.js
/** /**
* 梯形 * 梯形
*/ */
export class changeTrapezoidPlace { export class changeTrapezoidPlace {
constructor() { constructor() {
} }
// 梯形左 or 左上 // 梯形左
trapezoidLeftTop (storageMark, xMin, yMin) { trapezoidLeft (storageMark, xMin, yMin) {
var leftWidth = Math.max(xMin, storageMark.insideWidth - window.event.clientX + storageMark.grabx) var leftWidth = Math.max(xMin, storageMark.insideWidth - window.event.clientX + storageMark.grabx)
storageMark.el.firstElementChild.style.width = leftWidth + 'px' storageMark.el.firstElementChild.style.width = leftWidth + 'px'
storageMark.el.firstElementChild.lastElementChild.style.width = leftWidth - 2 + 'px' storageMark.el.firstElementChild.lastElementChild.style.width = leftWidth - 2 + 'px'
storageMark.el.style.left = Math.min(storageMark.left + window.event.clientX - storageMark.grabx, storageMark.left + storageMark.width - xMin) + 'px' storageMark.el.style.left = Math.min(storageMark.left + window.event.clientX - storageMark.grabx, storageMark.left + storageMark.width - xMin) + 'px'
this.sameTopCode(storageMark, xMin, yMin)
let line = storageMark.el.querySelector('.line') let line = storageMark.el.querySelector('.line')
line.style.width = leftWidth - 2 + 'px' line.style.width = leftWidth - 2 + 'px'
line.style.marginLeft = `-${(leftWidth - 2)/2}px` line.style.marginLeft = `-${(leftWidth - 2)/2}px`
console.log('左左左左左左')
} }
// 梯形右 or 右上 // 梯形top height
trapezoidRightTop (storageMark, xMin, yMin) { trapezoidTopHeight (storageMark, xMin, yMin) {
this.sameRightCode(storageMark, xMin, yMin) storageMark.el.style.top = Math.min(storageMark.top + window.event.clientY - storageMark.graby, storageMark.top + storageMark.height - yMin) + 'px'
this.sameTopCode(storageMark, xMin, yMin) storageMark.el.firstElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom - window.event.clientY + storageMark.graby) + 'px solid #5b5b5b'
} storageMark.el.firstElementChild.lastElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom - window.event.clientY + storageMark.graby) -2 + 'px solid #fff'
// 梯形右 or 右下 storageMark.el.style.height = Math.max(yMin, storageMark.height - window.event.clientY + storageMark.graby) + 'px'
trapezoidRightBottom (storageMark, xMin, yMin) {
this.sameRightCode(storageMark, xMin, yMin)
this.sameBottomCode(storageMark, xMin, yMin)
} }
// 梯形左左下 // 梯形左下
trapezoidLeftBottom (storageMark, xMin, yMin) { trapezoidBottom (storageMark, xMin, yMin) {
var leftWidth1 = Math.max(xMin, storageMark.insideWidth - window.event.clientX + storageMark.grabx)
storageMark.el.firstElementChild.style.width = leftWidth1 + 'px'
storageMark.el.firstElementChild.lastElementChild.style.width = leftWidth1 - 2 + 'px'
storageMark.el.style.left = Math.min(storageMark.left + window.event.clientX - storageMark.grabx, storageMark.left + storageMark.width - xMin) + 'px'
storageMark.el.style.height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px' storageMark.el.style.height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px'
storageMark.el.firstElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom + window.event.clientY - storageMark.graby) + 'px solid #5b5b5b' storageMark.el.firstElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom + window.event.clientY - storageMark.graby) + 'px solid #5b5b5b'
storageMark.el.firstElementChild.lastElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom + window.event.clientY - storageMark.graby) -2 + 'px solid #fff' storageMark.el.firstElementChild.lastElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom + window.event.clientY - storageMark.graby) -2 + 'px solid #fff'
} }
// 梯形图像使用相同右部修改的代码 // 梯形右宽
sameRightCode (storageMark, xMin, yMin) { trapezoidRight (storageMark, xMin, yMin) {
var oWidth = Math.max(xMin, storageMark.insideWidth + window.event.clientX - storageMark.grabx) var oWidth = Math.max(xMin, storageMark.insideWidth + window.event.clientX - storageMark.grabx)
storageMark.el.firstElementChild.style.width = oWidth + 'px' storageMark.el.firstElementChild.style.width = oWidth + 'px'
storageMark.el.firstElementChild.lastElementChild.style.width = oWidth - 2 + 'px' storageMark.el.firstElementChild.lastElementChild.style.width = oWidth - 2 + 'px'
...@@ -44,33 +37,21 @@ export class changeTrapezoidPlace { ...@@ -44,33 +37,21 @@ export class changeTrapezoidPlace {
line.style.width = oWidth - 2 + 'px' line.style.width = oWidth - 2 + 'px'
line.style.marginLeft = `-${(oWidth - 2)/2}px` line.style.marginLeft = `-${(oWidth - 2)/2}px`
} }
// 梯形图像使用相同上部修改的代码
sameTopCode (storageMark, xMin, yMin) {
storageMark.el.style.top = Math.min(storageMark.top + window.event.clientY - storageMark.graby, storageMark.top + storageMark.height - yMin) + 'px'
storageMark.el.firstElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom - window.event.clientY + storageMark.graby) + 'px solid #5b5b5b'
storageMark.el.firstElementChild.lastElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom - window.event.clientY + storageMark.graby) -2 + 'px solid #fff'
storageMark.el.style.height = Math.max(yMin, storageMark.height - window.event.clientY + storageMark.graby) + 'px'
}
// 梯形图像使用相同下部修改的代码
sameBottomCode (storageMark, xMin, yMin) {
var oWidth = Math.max(xMin, storageMark.insideWidth + window.event.clientX - storageMark.grabx)
storageMark.el.firstElementChild.style.width = oWidth + 'px'
storageMark.el.firstElementChild.lastElementChild.style.width = oWidth - 2 + 'px'
storageMark.el.style.height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px'
storageMark.el.firstElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom + window.event.clientY - storageMark.graby) + 'px solid #5b5b5b'
storageMark.el.firstElementChild.lastElementChild.style.borderBottom = Math.max(yMin, storageMark.insideBottom + window.event.clientY - storageMark.graby) -2 + 'px solid #fff'
}
} }
// 圆 // 圆 部分公共坐标
export class changeCircle { export class changeCircle {
constructor() { constructor() {
} }
// 改变左宽度 // 改变左宽度
circleWidth (storageMark, xMin, yMin) { circleWidth (storageMark, xMin, yMin) {
var circle_width = Math.max(xMin, storageMark.width - window.event.clientX + storageMark.grabx) + 'px' var circle_width = Math.max(xMin, storageMark.width - window.event.clientX + storageMark.grabx)
storageMark.el.style.width = circle_width storageMark.el.style.width = circle_width + 'px'
storageMark.el.firstElementChild.style.width = circle_width storageMark.el.firstElementChild.style.width = circle_width + 'px'
storageMark.el.style.left = Math.min(storageMark.left + window.event.clientX - storageMark.grabx, storageMark.left + storageMark.width - xMin) + 'px' storageMark.el.style.left = Math.min(storageMark.left + window.event.clientX - storageMark.grabx, storageMark.left + storageMark.width - xMin) + 'px'
// 浴池补丁
if(storageMark.el.firstElementChild.className === 'bath-box') {
console.log(storageMark.el.firstElementChild)
}
} }
// 改变右宽 // 改变右宽
circleRightWidth (storageMark, xMin) { circleRightWidth (storageMark, xMin) {
...@@ -89,4 +70,4 @@ export class changeCircle { ...@@ -89,4 +70,4 @@ export class changeCircle {
storageMark.el.style.height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px' storageMark.el.style.height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px'
storageMark.el.firstElementChild.style.height = storageMark.el.style.height storageMark.el.firstElementChild.style.height = storageMark.el.style.height
} }
} }
\ No newline at end of file
src/components/HelloWorld.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
<canvas class="shape_rotater" width="20" height="40"></canvas> <canvas class="shape_rotater" width="20" height="40"></canvas>
</span> </span>
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="arc"> <span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<div class="dinner_table" style="margin: 0;"> <div class="dinner_table" style="margin: 0;">
<div class="group"> <div class="group">
<div class="mouse-first"></div> <div class="mouse-first"></div>
...@@ -27,6 +27,49 @@ ...@@ -27,6 +27,49 @@
</div> </div>
<canvas class="shape_rotater" width="20" height="40"></canvas> <canvas class="shape_rotater" width="20" height="40"></canvas>
</span> </span>
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<div class="double-bed">
<div class="group">
<div class="mouse-first"></div>
<div class="mouse-second"></div>
<div class="mouse-third"></div>
<div class="mouse-fourth"></div>
</div>
<div class="pillow-one">
</div>
<div class="pillow-two"></div>
<div class="quilt"></div>
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</span>
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<div class="single-bed">
<div class="group">
<div class="mouse-first"></div>
<div class="mouse-second"></div>
<div class="mouse-third"></div>
<div class="mouse-fourth"></div>
</div>
<div class="pillow-one">
</div>
<div class="quilt"></div>
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</span>
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<div class="bath-box">
<div class="group">
<div class="mouse-first"></div>
<div class="mouse-second"></div>
<div class="mouse-third"></div>
<div class="mouse-fourth"></div>
</div>
<div class="bath-ridge">
</div>
<div class="bath-faucet"></div>
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</span>
</div> </div>
<div class="left canvas" style="width: calc(100% - 300px);height: 800px;" id="give"> <div class="left canvas" style="width: calc(100% - 300px);height: 800px;" id="give">
<canvas :width="canvasWidth" height="800" id="myCanvas" @dragover="allowDrop($event)"></canvas> <canvas :width="canvasWidth" height="800" id="myCanvas" @dragover="allowDrop($event)"></canvas>
...@@ -83,11 +126,14 @@ export default { ...@@ -83,11 +126,14 @@ export default {
z-index: auto; z-index: auto;
transform-origin: center center; transform-origin: center center;
position: relative; position: relative;
margin: 20px 20px;
} }
.shape_rotater { .shape_rotater {
display: none; display: none;
} }
#give .box {
margin: 0;
}
#give .shape_rotater{ #give .shape_rotater{
position: absolute; position: absolute;
left: 50%; left: 50%;
...@@ -138,7 +184,6 @@ export default { ...@@ -138,7 +184,6 @@ export default {
top: -4px; top: -4px;
} }
#give .group .mouse-third { #give .group .mouse-third {
right: -4px; right: -4px;
bottom: -4px; bottom: -4px;
} }
...@@ -183,4 +228,106 @@ export default { ...@@ -183,4 +228,106 @@ export default {
top: 8px; top: 8px;
z-index: 9999; z-index: 9999;
} }
/* 双人床 */
.double-bed {
width: 100px;
height: 130px;
border: 1px solid #000;
position: relative;
background: #ffffff;
}
.double-bed .pillow-one {
position: absolute;
width: 40%;
height: 12%;
left: 5px;
top: 5px;
border-radius: 3px;
border: 1px solid #000;
}
.double-bed .pillow-two {
position: absolute;
width: 40%;
height: 12%;
right: 5px;
top: 5px;
border-radius: 3px;
border: 1px solid #000;
box-sizing: border-box;
}
.double-bed .quilt {
width: 100%;
height: 15px;
border-top: 1px solid #000;
border-bottom: 2px solid #000;
background: #fff;
position: absolute;
left: 0;
top: 12%;
box-sizing: border-box;
}
/* 单人床 */
.single-bed {
width: 50px;
height: 100px;
border: 1px solid #000;
position: relative;
background: #ffffff;
}
.single-bed .pillow-one {
position: absolute;
width: 80%;
height: 20px;
left: 50%;
margin-left: -40%;
top: 5px;
border-radius: 3px;
border: 1px solid #000;
box-sizing: border-box;
}
.single-bed .quilt {
width: 100%;
height: 12px;
border-top: 1px solid #000;
border-bottom: 2px solid #000;
background: #fff;
position: absolute;
left: 0;
top: 15px;
box-sizing: border-box;
}
/* 浴池 */
.bath-box {
width: 240px;
height: 100px;
position: relative;
border: 1px solid #000;
box-sizing: border-box;
background: #fff;
}
.bath-ridge {
width: 200px;
height: 80px;
border: 1px solid #000;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 20%;
border-top-left-radius: 20%;
position: absolute;
left: 10px;
box-sizing: border-box;
top: 50%;
transform: translate(0, -50%);
}
.bath-faucet {
width: 10px;
height: 60px;
position: absolute;
border: 1px solid #000;
left: 0;
top: 50%;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
transform: translate(0, -50%);
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论