Skip to content

N
new_house_image
提交 0c8cc1ef 作者: 王磊
操作

完善浴缸，添加沙发马桶，整理代码，添加部分注释

上级 60492766
流水线 #10357 已失败 于阶段
正在显示 包含 520 行增加 和 261 行删除
src/changeImage.js
......@@ -2,8 +2,6 @@
* 梯形
*/
export class changeTrapezoidPlace {
constructor() {
}
// 梯形左
trapezoidLeft (storageMark, xMin, yMin) {
var leftWidth = Math.max(xMin, storageMark.insideWidth - window.event.clientX + storageMark.grabx)
......@@ -13,7 +11,6 @@ export class changeTrapezoidPlace {
let line = storageMark.el.querySelector('.line')
line.style.width = leftWidth - 2 + 'px'
line.style.marginLeft = `-${(leftWidth - 2)/2}px`
console.log('左左左左左左')
}
// 梯形top height
trapezoidTopHeight (storageMark, xMin, yMin) {
......@@ -40,34 +37,99 @@ export class changeTrapezoidPlace {
}
// 圆 部分公共坐标
export class changeCircle {
constructor() {
}
// 改变左宽度
circleWidth (storageMark, xMin, yMin) {
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)
circleWidth (storageMark, xMin, yMin, name) {
var circle_width = Math.max(xMin, storageMark.width - window.event.clientX + storageMark.grabx) + 'px'
// 这里判断准备在html传递最小值，以作动态判断
if(parseInt(circle_width) > 100 || name === 'arc'){
storageMark.el.style.width = circle_width
storageMark.el.firstElementChild.style.width = circle_width
storageMark.el.style.left = Math.min(storageMark.left + window.event.clientX - storageMark.grabx, storageMark.left + storageMark.width - xMin) + 'px'
this.bathtub(storageMark, parseInt(circle_width))
}
}
// 改变右宽
circleRightWidth (storageMark, xMin) {
circleRightWidth (storageMark, xMin, yMin, name) {
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
if(parseInt(circle_width)>108 || name === 'arc'){
storageMark.el.style.width = circle_width
storageMark.el.firstElementChild.style.width = circle_width
this.bathtub(storageMark, parseInt(circle_width))
}
}
// 改变top高度
circleTopHeight (storageMark, xMin, yMin) {
storageMark.el.style.top = Math.min(storageMark.top + window.event.clientY - storageMark.graby, storageMark.top + storageMark.height - yMin) + '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
circleTopHeight (storageMark, xMin, yMin, name) {
let height = Math.max(yMin, storageMark.height - window.event.clientY + storageMark.graby) + 'px'
if(parseInt(height) > 55 || name === 'arc') {
storageMark.el.style.top = Math.min(storageMark.top + window.event.clientY - storageMark.graby, storageMark.top + storageMark.height - yMin) + 'px'
storageMark.el.style.height = height
storageMark.el.firstElementChild.style.height = height
this.bathtub(storageMark, undefined, parseInt(height))
}
}
// 改变高度
circleHeight (storageMark, xMin, yMin) {
storageMark.el.style.height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px'
storageMark.el.firstElementChild.style.height = storageMark.el.style.height
circleHeight (storageMark, xMin, yMin, name) {
let height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px'
if (parseInt(height) > 55 || name === 'arc') {
storageMark.el.style.height = height
storageMark.el.firstElementChild.style.height = height
this.bathtub(storageMark, undefined, parseInt(height))
}
}
// 浴缸补丁
bathtub (storageMark, circle_width, circle_height) {
if(storageMark.el.firstElementChild.className === 'bath-box') {
let bathRidge = storageMark.el.firstElementChild.querySelector('.bath-ridge')
circle_width ? bathRidge.style.width = circle_width < 80 ? 80 : circle_width - 40 + 'px':''
circle_height ? bathRidge.style.height = circle_height < 36 ? 36 : circle_height - 20 + 'px':''
}
}
}
// 获取坐标构造函数
export class getPlaceXY {
constructor () {
this.el = null
this.dir = ""
this.grabx = null
this.graby = null
this.width = null
this.height = null
this.left = null
this.top = null
this.borderLeft = null
this.borderRight = null
this.borderBottom = null
this.rotate = null
this.name = null
// 内圆数据
this.tableWidth = null
this.tableTop = null
this.tableHeight = null
// 第一个梯形数据
this.trapezoidOneLeft = null
}
// 用于用户移动图形坐标
getMouseXY (e) {
var x = 0, y = 0
e = e || window.event
if (e.pageX) {
x = e.pageX
y = e.pageY
} else {
x = e.clientX + drawBox.scrollLeft - drawBox.clientLeft
y = e.clientY + drawBox.scrollTop - drawBox.clientTop
}
return {
x: x,
y: y
}
}
// 梯形
trapezoid (storageMark, n) {
// 内梯形
storageMark.insideWidth = parseInt(window.getComputedStyle(n)['width'].split("px").join(''))
storageMark.insideHeight = parseInt(window.getComputedStyle(n)['height'].split("px").join(''))
storageMark.insideBottom = parseInt(window.getComputedStyle(n)['border-bottom'])
}
}
\ No newline at end of file
src/components/HelloWorld.vue
<template>
<div class="container">
<!-- 图形建造box -->
<div class="sidebar left">
<!-- 梯形 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="Trapezoid">
<div class="bench" style="width: 28px;">
<div class="group">
......@@ -16,7 +17,8 @@
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</span>
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<!-- 圆 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="arc">
<div class="dinner_table" style="margin: 0;">
<div class="group">
<div class="mouse-first"></div>
......@@ -27,6 +29,19 @@
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</span>
<!-- 矩形 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="arc">
<div class="rectangle-box" style="margin: 0;">
<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>
<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">
......@@ -42,7 +57,8 @@
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</span>
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<!-- 单人床 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="arc">
<div class="single-bed">
<div class="group">
<div class="mouse-first"></div>
......@@ -56,6 +72,7 @@
</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">
......@@ -67,11 +84,46 @@
<div class="bath-ridge">
</div>
<div class="bath-faucet"></div>
<div class="bath-eye"></div>
<div class="bath-column"></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="sofa-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="sofa-top-pillow"></div>
<div class="sofa-left-pillow"></div>
<div class="sofa-bottom-pillow"></div>
<div class="sofa-line"></div>
</div>
<canvas class="shape_rotater" width="20" height="40"></canvas>
</span>
<!-- 马桶 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="public" min-width="100">
<div class="toilet-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="toilet-watercover"></div>
<div class="toilet-sitting-outer"></div>
<div class="toilet-sitting-inside"></div>
<div class="toilet-sitting-eye"></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">
<!-- 图形操作box -->
<div class="left canvas" style="width: calc(100% - 300px);height: 800px;" id="drawBox">
<canvas :width="canvasWidth" height="800" id="myCanvas" @dragover="allowDrop($event)"></canvas>
</div>
</div>
......@@ -85,10 +137,12 @@ export default {
}
},
mounted () {
// 获取canvas的width
this.canvasWidth = document.querySelector('.canvas').offsetWidth
this.Canvas.start()
},
methods: {
// 鼠标拖拽事件
dragStart (event) {
this.Canvas.dragStart(event)
},
......@@ -98,236 +152,3 @@ export default {
}
}
</script>
<style>
.canvas {
background: url('../assets/canvas_bg.jpg') repeat;
}
.left {
float: left;
}
.right {
float: right;
}
.sidebar {
width: 300px;
min-height: 800px;
background: #f7f7f7;
}
.dinner_table {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #5b5b5b;
position: relative;
float: left;
z-index: auto;
}
.box {
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%;
margin-left: -10px;
top: -40px;
display: block;
z-index: 9999;
}
#give .shape_rotater.rotate_enable{
cursor: url(../assets/rotate.gif) 16 16, auto;
}
::before,::after {
display: none;
}
.beforeBlock::before,.beforeBlock::after{
display: block;
}
.beforeNone::before,.beforeNone::after{
display: none;
}
.group {
padding: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid peru;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
display: none;
z-index: 9999;
}
#give .group div {
position: absolute;
width: 6px;
height: 6px;
border: 1px solid peru;
background: #fff;
}
#give .group .mouse-first {
left: -4px;
top: -4px;
}
#give .group .mouse-second {
right: -4px;
top: -4px;
}
#give .group .mouse-third {
right: -4px;
bottom: -4px;
}
#give .group .mouse-fourth {
left: -4px;
bottom: -4px;
}
#give span::after {
bottom: -2px;
left: -2px;
}
#give span::before {
top: -2px;
left: -2px;
}
/* 梯形 */
.bench {
height: 0;
border-bottom: 48px solid #5b5b5b;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
}
.bench-child {
width: 26px;
height: 0;
border-bottom: 46px solid #f7f7f7;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
left: 2px;
top: 1px;
}
.line {
position: absolute;
width: 28px;
height: 1px;
background: #5c5c5c;
left: 50%;
margin-left: -14px;
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>
src/main.js
......@@ -4,7 +4,8 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import Canvas from './canvas'
import './style/graph.css'
import './style/index.css'
Vue.config.productionTip = false
Vue.prototype.Canvas = Canvas
/* eslint-disable no-new */
......
src/style/graph.css 0 → 100644
/* 梯形 */
.bench {
height: 0;
border-bottom: 48px solid #5b5b5b;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
}
.bench-child {
width: 26px;
height: 0;
border-bottom: 46px solid #f7f7f7;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
left: 2px;
top: 1px;
}
.line {
position: absolute;
width: 28px;
height: 1px;
background: #5c5c5c;
left: 50%;
margin-left: -14px;
top: 8px;
z-index: 9999;
}
/* 矩形 */
.rectangle-box {
width: 65px;
height: 40px;
border: 1px solid #000;
}
#drawBox .rectangle-box,#drawBox .dinner_table {
background: #fff;
}
/* 双人床 */
.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: 1px;
border-radius: 3px;
border: 1px solid #000;
}
.double-bed .pillow-two {
position: absolute;
width: 40%;
height: 12%;
right: 5px;
top: 1px;
border-radius: 3px;
border: 1px solid #000;
box-sizing: border-box;
}
.double-bed .quilt {
width: 100%;
height: 12%;
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: 1px;
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-radius: 50px;
position: absolute;
left: 15px;
box-sizing: border-box;
top: 50%;
transform: translate(0, -50%);
min-height: 36px;
min-width: 80px;
}
.bath-faucet {
width: 10px;
height: 60%;
position: absolute;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
left: 0;
top: 50%;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
transform: translate(0, -50%);
}
.bath-eye {
width: 10px;
height: 10px;
border-radius: 50%;
background: #000;
position: absolute;
right: 30%;
top: 50%;
transform: translate(0, -50%);
}
.bath-column {
width: 24px;
height: 5px;
border-radius: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
border: 1px solid #000;
}
/* 沙发 */
.sofa-box {
position: relative;
width: 95px;
height: 160px;
border-right: 1px solid #000;
box-sizing: border-box;
border-bottom-right-radius: 5%;
border-top-right-radius: 5%;
background: #fff;
}
.sofa-left-pillow {
width: 20%;
height: 90%;
border-radius: 5px;
border: 1px solid #000;
box-sizing: border-box;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
z-index: 9;
background: #fff;
}
.sofa-bottom-pillow {
width: 99%;
height: 10%;
border-radius: 5px;
border: 1px solid #000;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: -2px;
z-index: 8;
background: #fff;
}
.sofa-top-pillow {
width: 99%;
height: 10%;
border-radius: 5px;
border: 1px solid #000;
box-sizing: border-box;
position: absolute;
left: 0;
top: -2px;
z-index: 8;
background: #fff;
}
.sofa-line {
width: 100%;
height: 25%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
/* 马桶 */
.toilet-box {
width: 100px;
height: 50px;
position: relative;
box-sizing: border-box;
}
.toilet-watercover {
width: 20px;
height: 100%;
border: 1px solid #000;
box-sizing: border-box;
position: absolute;
right: 0;
top: 0;
border-radius: 20%;
z-index: 9;
background: #fff;
}
.toilet-sitting-outer {
width: 100%;
height: 100%;
border-radius: 30px;
border: 1px solid #000;
box-sizing: border-box;
background: #fff;
}
.toilet-sitting-inside {
width: 60%;
height: 60%;
border-radius: 30px;
border: 1px solid #000;
box-sizing: border-box;
left: 40%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.toilet-sitting-eye {
width: 14px;
height: 8px;
border-radius: 50%;
background: #000;
box-sizing: border-box;
right: 40%;
top: 50%;
position: absolute;
transform: translate(0, -50%);
}
.toilet-eye {
width: 5%;
height: 5%;
border-radius: 50%;
background: #000;
box-sizing: border-box;
right: 40%;
top: 50%;
position: absolute;
transform: translate(0, -50%);
}
\ No newline at end of file
src/style/index.css 0 → 100644
.canvas {
background: url('../assets/canvas_bg.jpg') repeat;
}
.sidebar {
width: 300px;
min-height: 800px;
background: #f7f7f7;
}
.dinner_table {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #5b5b5b;
position: relative;
float: left;
z-index: auto;
}
.box {
z-index: auto;
transform-origin: center center;
position: relative;
margin: 20px 20px;
}
.shape_rotater {
display: none;
}
#drawBox .box {
margin: 0;
}
#drawBox .shape_rotater{
position: absolute;
left: 50%;
margin-left: -10px;
top: -40px;
display: block;
z-index: 9999;
}
#drawBox .shape_rotater.rotate_enable{
cursor: url(../assets/rotate.gif) 16 16, auto;
}
.group {
padding: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid peru;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
display: none;
z-index: 9999;
}
#drawBox .group div {
position: absolute;
width: 6px;
height: 6px;
border: 1px solid peru;
background: #fff;
}
#drawBox .group .mouse-first {
left: -4px;
top: -4px;
}
#drawBox .group .mouse-second {
right: -4px;
top: -4px;
}
#drawBox .group .mouse-third {
right: -4px;
bottom: -4px;
}
#drawBox .group .mouse-fourth {
left: -4px;
bottom: -4px;
}
#drawBox span::after {
bottom: -2px;
left: -2px;
}
#drawBox span::before {
top: -2px;
left: -2px;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论