Skip to content

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

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

上级 687509bd
流水线 #10311 已失败 于阶段
正在显示 包含 200 行增加 和 111 行删除
src/canvas.js
......@@ -15,6 +15,8 @@ var rotateoffsetWidth, rotateoffsetHeight;
var changeTrapezoid = new changeTrapezoidPlace()
// 圆坐标改变
var Circle = new changeCircle()
function start() {
canvas = document.getElementById('give');
box = document.querySelectorAll('.sidebar .box')
......@@ -140,7 +142,6 @@ function start() {
// 物体移动改变形状
if (storageMark !==null) {
console.log(storageMark, 'storageMarkstorageMarkstorageMark')
// 整体移动
if(storageMark.dir.indexOf("v") !== -1) {
debug = false
......@@ -161,76 +162,43 @@ function start() {
} else {
if(storageMark.dir.indexOf("e") !== -1) {
// width
if (storageMark.name === 'public') {
Circle.__proto__.circleRightWidth(storageMark, xMin, yMin)
console.log(1)
}
if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidRight(storageMark, xMin, yMin)
}
}
if(storageMark.dir.indexOf("s") !== -1) {
// height
if (storageMark.name === 'public') {
Circle.__proto__.circleHeight(storageMark, xMin, yMin)
console.log(2)
}
if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidBottom(storageMark, xMin, yMin)
}
}
if(storageMark.dir.indexOf("w") !== -1) {
// width left
if (storageMark.name === 'public') {
Circle.__proto__.circleWidth(storageMark, xMin, yMin)
console.log(3)
}
if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidLeft(storageMark, xMin, yMin)
}
}
if(storageMark.dir.indexOf("n") !== -1) {
// top height
if (storageMark.name === 'public') {
Circle.__proto__.circleTopHeight(storageMark, xMin, yMin)
console.log(4)
}
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
......@@ -262,18 +230,7 @@ function start() {
return dir
}
if (e.target.className === 'mouse-first') {
// console.log(deg, "xxxxx")
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') {
dir = "ne"
} else if (e.target.className === 'mouse-third') {
......@@ -304,13 +261,17 @@ function start() {
route.style.transform = `rotateZ(${parseInt(dis)}deg)`
let transform = window.getComputedStyle(route)['transform'],
matrix = transform.slice(7, -1).split(',')
console.log(transform, '矩阵2')
let rotateWidth = rotateoffsetHeight * matrix[1] + rotateoffsetWidth * matrix[0]
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))
// storageMark.width = Math.abs(rotateWidth)
// storageMark.height = Math.abs(rotateHeight)
route.style.width = Math.abs(rotateWidth) + "px"
route.style.height = Math.abs(rotateHeight) + "px"
// route.style.transform
// 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
......@@ -4,39 +4,32 @@
export class changeTrapezoidPlace {
constructor() {
}
// 梯形左 or 左上
trapezoidLeftTop (storageMark, xMin, yMin) {
// 梯形左
trapezoidLeft (storageMark, xMin, yMin) {
var leftWidth = Math.max(xMin, storageMark.insideWidth - window.event.clientX + storageMark.grabx)
storageMark.el.firstElementChild.style.width = leftWidth + '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'
this.sameTopCode(storageMark, xMin, yMin)
let line = storageMark.el.querySelector('.line')
line.style.width = leftWidth - 2 + 'px'
line.style.marginLeft = `-${(leftWidth - 2)/2}px`
console.log('左左左左左左')
}
// 梯形右 or 右上
trapezoidRightTop (storageMark, xMin, yMin) {
this.sameRightCode(storageMark, xMin, yMin)
this.sameTopCode(storageMark, xMin, yMin)
}
// 梯形右 or 右下
trapezoidRightBottom (storageMark, xMin, yMin) {
this.sameRightCode(storageMark, xMin, yMin)
this.sameBottomCode(storageMark, xMin, yMin)
// 梯形top height
trapezoidTopHeight (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'
}
// 梯形左左下
trapezoidLeftBottom (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'
// 梯形左下
trapezoidBottom (storageMark, xMin, yMin) {
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'
}
// 梯形图像使用相同右部修改的代码
sameRightCode (storageMark, xMin, yMin) {
// 梯形右宽
trapezoidRight (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'
......@@ -44,33 +37,21 @@ export class changeTrapezoidPlace {
line.style.width = oWidth - 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 {
constructor() {
}
// 改变左宽度
circleWidth (storageMark, xMin, yMin) {
var circle_width = Math.max(xMin, storageMark.width - window.event.clientX + storageMark.grabx) + 'px'
storageMark.el.style.width = circle_width
storageMark.el.firstElementChild.style.width = circle_width
var circle_width = Math.max(xMin, storageMark.width - window.event.clientX + storageMark.grabx)
storageMark.el.style.width = circle_width + 'px'
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'
// 浴池补丁
if(storageMark.el.firstElementChild.className === 'bath-box') {
console.log(storageMark.el.firstElementChild)
}
}
// 改变右宽
circleRightWidth (storageMark, xMin) {
......
src/components/HelloWorld.vue
......@@ -16,7 +16,7 @@
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</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="group">
<div class="mouse-first"></div>
......@@ -27,6 +27,49 @@
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</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 class="left canvas" style="width: calc(100% - 300px);height: 800px;" id="give">
<canvas :width="canvasWidth" height="800" id="myCanvas" @dragover="allowDrop($event)"></canvas>
......@@ -83,11 +126,14 @@ export default {
z-index: auto;
transform-origin: center center;
position: relative;
margin: 20px 20px;
}
.shape_rotater {
display: none;
}
#give .box {
margin: 0;
}
#give .shape_rotater{
position: absolute;
left: 50%;
......@@ -138,7 +184,6 @@ export default {
top: -4px;
}
#give .group .mouse-third {
right: -4px;
bottom: -4px;
}
......@@ -183,4 +228,106 @@ export default {
top: 8px;
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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论