Skip to content

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

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

上级 60492766
流水线 #10357 已失败 于阶段
正在显示 包含 607 行增加 和 367 行删除
src/canvas.js
import { changeTrapezoidPlace, changeCircle } from './changeImage' import { changeTrapezoidPlace, changeCircle, getPlaceXY } from './changeImage'
var createEl, canvas, box, temp, dir, storageMark = {}, moveShortX, moveShortY; var createEl, drawBox, box, temp, dir, storageMark = {}, moveShortX, moveShortY;
var dx = 0; // 获取鼠标按下的盒子某个位置的相对浏览器可视区域坐标 var dx = 0; // 获取鼠标按下的盒子某个位置的相对浏览器可视区域坐标
var sx = 0; // 获取原始 var sx = 0; // 获取原始
/**
* 旋转使用变量
*/
var route; var route;
var centerX = 0 // 默认旋转的中心点 var centerX = 0 // 默认旋转的中心点
var centerY = 0 var centerY = 0
...@@ -11,26 +14,42 @@ var dis = 0 ...@@ -11,26 +14,42 @@ var dis = 0
// 旋转时重新计宽高 // 旋转时重新计宽高
var rotateoffsetWidth, rotateoffsetHeight; var rotateoffsetWidth, rotateoffsetHeight;
// 梯形坐标改变 /**
* 实例化函数
* @param changeTrapezoid 梯形坐标改变
* @param Circle 圆坐标改变
* @param placeXY 获取坐标构造函数
*/
var changeTrapezoid = new changeTrapezoidPlace() var changeTrapezoid = new changeTrapezoidPlace()
// 圆坐标改变
var Circle = new changeCircle() var Circle = new changeCircle()
var placeXY = new getPlaceXY()
/**
* 操作函数
* @param mobile 类，操作
* @param coordinate 获取坐标
* @param drawTable 鼠标松开开始获取与coordinate配合使用
* @param givePlace 赋予拖动图像初始位置
* @param mousedown 鼠标按下事件获取坐标，高亮等操作
* @param mousemove 鼠标移动的方法
* @param mousedownDom 获取要改变的元素
* @param variablePointer 鼠标指针的判断
* @param drawColumn canvas旋转图
* @param movehandle 旋转角度赋值
* @param angle 计算旋转角度
*/
function start() { function start() {
canvas = document.getElementById('give'); drawBox = document.getElementById('drawBox');
box = document.querySelectorAll('.sidebar .box') box = document.querySelectorAll('.sidebar .box')
var give = document.getElementById('myCanvas'); var canvas = document.getElementById('myCanvas');
console.log(box, 'box') // 获取当前点击位置的offset
for(let i = 0;i<box.length;i++) { for(let i = 0;i<box.length;i++) {
box[i].onmousedown = function (e) { box[i].onmousedown = function (e) {
dx = e.offsetX // 获取距离文档区域的 dx = e.offsetX // 获取距离文档区域的
sx = e.offsetY sx = e.offsetY
} }
} }
class mobile { class mobile {
constructor (x, y) { constructor () {
this.x = x this.x = x
this.y = y this.y = y
// 可调整动画函数 // 可调整动画函数
...@@ -38,13 +57,14 @@ function start() { ...@@ -38,13 +57,14 @@ function start() {
this.interval = 5 // 动画速度，越大越慢 this.interval = 5 // 动画速度，越大越慢
this.duration = 100 // 缓冲步数，越大越慢 this.duration = 100 // 缓冲步数，越大越慢
} }
// 获取坐标
coordinate (e) { coordinate (e) {
return { return {
x : e.clientX, x : e.clientX,
y : e.clientY y : e.clientY
} }
} }
// 绘制桌子 // 鼠标松开，开始
drawTable (e, node) { drawTable (e, node) {
let place = this.coordinate(e) let place = this.coordinate(e)
this.givePlace(node, place) this.givePlace(node, place)
...@@ -57,39 +77,42 @@ function start() { ...@@ -57,39 +77,42 @@ function start() {
} }
// 选中图形添加高亮 // 选中图形添加高亮
mousedown (event) { mousedown (event) {
let n = mobile.mousedownDom(event.target, "tagName", "SPAN")
let n = mobile.prototype.mousedownDom(event.target, "tagName", "SPAN") // 用户选中的是否为span
if(n.tagName === 'SPAN') { if(n.tagName === 'SPAN') {
mobile.prototype.drawColumn(n) // 计算旋转度数
mobile.drawColumn(n)
// 最后一个是不是canvas
if(n.lastElementChild.tagName === 'CANVAS'){ if(n.lastElementChild.tagName === 'CANVAS'){
let str = mobile.prototype.variablePointer(n, event) // 获取鼠标指针
let str = mobile.variablePointer(n, event)
if(str === 'wait') debug = true if(str === 'wait') debug = true
} }
// 拿到选中的元素用于旋转
route = n route = n
} }
let span = document.querySelectorAll('#give span') // 循环点击当前显示可操作边框
let span = document.querySelectorAll('#drawBox span')
for (let i = 0;i<span.length;i++) { for (let i = 0;i<span.length;i++) {
if(n === span[i]){ if(n === span[i]){
span[i].classList.add('beforeBlock') // 显示div
span[i].classList.remove('beforeNone')
document.styleSheets[0].insertRule(n.firstElementChild.tagName+'::before { display: block;}', 0)
document.styleSheets[0].insertRule(n.firstElementChild.tagName+'::after { display: block;}', 0)
span[i].firstElementChild.firstElementChild.style.display = 'block' span[i].firstElementChild.firstElementChild.style.display = 'block'
// 旋转圆柱显示 // 旋转圆柱显示
span[i].querySelector('.shape_rotater').style.display = 'block' span[i].querySelector('.shape_rotater').style.display = 'block'
} else { } else {
// 隐藏div
span[i].firstElementChild.firstElementChild.style.display = 'none ' span[i].firstElementChild.firstElementChild.style.display = 'none '
span[i].classList.add('beforeNone')
span[i].classList.remove('beforeBlock')
// 旋转圆柱隐藏 // 旋转圆柱隐藏
span[i].querySelector('.shape_rotater').style.display = 'none' span[i].querySelector('.shape_rotater').style.display = 'none'
} }
} }
// 点击的不是span return
if (n === null || n.tagName !== 'SPAN') { if (n === null || n.tagName !== 'SPAN') {
storageMark = null storageMark = null
return return
} }
dir = mobile.prototype.variablePointer(n, event) // 是否有鼠标指针
dir = mobile.variablePointer(n, event)
if (dir === "") return if (dir === "") return
// 赋予图形的宽高，坐标距离 // 赋予图形的宽高，坐标距离
storageMark = new getPlaceXY() storageMark = new getPlaceXY()
...@@ -103,31 +126,35 @@ function start() { ...@@ -103,31 +126,35 @@ function start() {
storageMark.top = n.offsetTop storageMark.top = n.offsetTop
rotateoffsetWidth = n.offsetWidth rotateoffsetWidth = n.offsetWidth
rotateoffsetHeight = n.offsetHeight rotateoffsetHeight = n.offsetHeight
if(n.tagName === 'SPAN') storageMark.name = n.attributes["name"].value // 图形的唯一标识对应不同操作函数
if(n.tagName === 'SPAN') {
getPlaceXY.prototype.trapezoid(n.firstElementChild) storageMark.name = n.attributes["name"].value
// storageMark.minWidth = n.attributes["min-width"].value
var mouseX = parseInt(getPlaceXY.prototype.getMouseXY(event).x), }
mouseY = parseInt(getPlaceXY.prototype.getMouseXY(event).y) // 梯形专用坐标获取
placeXY.__proto__.trapezoid(storageMark, n.firstElementChild)
// 计算移动坐标
var mouseX = parseInt(placeXY.__proto__.getMouseXY(event).x),
mouseY = parseInt(placeXY.__proto__.getMouseXY(event).y)
// 拿到用户选择之后的差值 // 拿到用户选择之后的差值
moveShortX = mouseX - storageMark.left moveShortX = mouseX - storageMark.left
moveShortY = mouseY - storageMark.top moveShortY = mouseY - storageMark.top
canvas.onmousemove = mobile.prototype.mousemove drawBox.onmousemove = mobile.prototype.mousemove
// 阻止冒泡 // 阻止冒泡
window.event.returnValue = false window.event.returnValue = false
window.event.cancelBubble = true window.event.cancelBubble = true
} }
mousemove (e) { mousemove (e) {
let str, xMin = 8, yMin = 8; let str, xMin = 8, yMin = 8;
let n = mobile.prototype.mousedownDom(event.target, "tagName", "SPAN") let n = mobile.mousedownDom(event.target, "tagName", "SPAN")
// 鼠标指针 // 鼠标指针
mobile.prototype.movehandle(e) mobile.movehandle(e)
if (n.tagName === "SPAN") { if (n.tagName === "SPAN") {
if (centerX === 0 && centerY === 0) { if (centerX === 0 && centerY === 0) {
centerX = n.offsetLeft + n.offsetWidth / 2 centerX = n.offsetLeft + n.offsetWidth / 2
centerY = n.offsetTop + n.offsetHeight / 2 centerY = n.offsetTop + n.offsetHeight / 2
} }
str = mobile.prototype.variablePointer(n, e) str = mobile.variablePointer(n, e)
if(str === 'wait') { if(str === 'wait') {
e.target.classList.add('rotate_enable') e.target.classList.add('rotate_enable')
} else { } else {
...@@ -139,15 +166,14 @@ function start() { ...@@ -139,15 +166,14 @@ function start() {
} else { } else {
n.style.cursor = "" n.style.cursor = ""
} }
// 物体移动改变形状 // 物体移动改变形状
if (storageMark !==null) { if (storageMark !==null) {
// 整体移动 // 整体移动
if(storageMark.dir.indexOf("v") !== -1) { if(storageMark.dir.indexOf("v") !== -1) {
debug = false debug = false
// 获取差值 // 获取差值
var x = getPlaceXY.prototype.getMouseXY(e).x - moveShortX, var x = placeXY.__proto__.getMouseXY(e).x - moveShortX,
y = getPlaceXY.prototype.getMouseXY(e).y - moveShortY, y = placeXY.__proto__.getMouseXY(e).y - moveShortY,
width = document.documentElement.clientWidth - storageMark.width, width = document.documentElement.clientWidth - storageMark.width,
height = document.documentElement.clientHeight - storageMark.height height = document.documentElement.clientHeight - storageMark.height
// 拿到移动的位置 // 拿到移动的位置
...@@ -162,8 +188,8 @@ function start() { ...@@ -162,8 +188,8 @@ function start() {
} else { } else {
if(storageMark.dir.indexOf("e") !== -1) { if(storageMark.dir.indexOf("e") !== -1) {
// width // width
if (storageMark.name === 'public') { if (storageMark.name === 'public' || storageMark.name === 'arc') {
Circle.__proto__.circleRightWidth(storageMark, xMin, yMin) Circle.__proto__.circleRightWidth(storageMark, xMin, yMin, storageMark.name)
} }
if (storageMark.name === 'Trapezoid') { if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidRight(storageMark, xMin, yMin) changeTrapezoid.__proto__.trapezoidRight(storageMark, xMin, yMin)
...@@ -171,8 +197,8 @@ function start() { ...@@ -171,8 +197,8 @@ function start() {
} }
if(storageMark.dir.indexOf("s") !== -1) { if(storageMark.dir.indexOf("s") !== -1) {
// height // height
if (storageMark.name === 'public') { if (storageMark.name === 'public' || storageMark.name === 'arc') {
Circle.__proto__.circleHeight(storageMark, xMin, yMin) Circle.__proto__.circleHeight(storageMark, xMin, yMin, storageMark.name)
} }
if (storageMark.name === 'Trapezoid') { if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidBottom(storageMark, xMin, yMin) changeTrapezoid.__proto__.trapezoidBottom(storageMark, xMin, yMin)
...@@ -180,8 +206,8 @@ function start() { ...@@ -180,8 +206,8 @@ function start() {
} }
if(storageMark.dir.indexOf("w") !== -1) { if(storageMark.dir.indexOf("w") !== -1) {
// width left // width left
if (storageMark.name === 'public') { if (storageMark.name === 'public' || storageMark.name === 'arc') {
Circle.__proto__.circleWidth(storageMark, xMin, yMin) Circle.__proto__.circleWidth(storageMark, xMin, yMin, storageMark.name)
} }
if (storageMark.name === 'Trapezoid') { if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidLeft(storageMark, xMin, yMin) changeTrapezoid.__proto__.trapezoidLeft(storageMark, xMin, yMin)
...@@ -190,8 +216,8 @@ function start() { ...@@ -190,8 +216,8 @@ function start() {
} }
if(storageMark.dir.indexOf("n") !== -1) { if(storageMark.dir.indexOf("n") !== -1) {
// top height // top height
if (storageMark.name === 'public') { if (storageMark.name === 'public' || storageMark.name === 'arc') {
Circle.__proto__.circleTopHeight(storageMark, xMin, yMin) Circle.__proto__.circleTopHeight(storageMark, xMin, yMin, storageMark.name)
} }
if (storageMark.name === 'Trapezoid') { if (storageMark.name === 'Trapezoid') {
changeTrapezoid.__proto__.trapezoidTopHeight(storageMark, xMin, yMin) changeTrapezoid.__proto__.trapezoidTopHeight(storageMark, xMin, yMin)
...@@ -202,7 +228,7 @@ function start() { ...@@ -202,7 +228,7 @@ function start() {
} }
} }
// 获取要改变的dom // 获取要改变的dom
mousedownDom(el, type, value) { static mousedownDom(el, type, value) {
temp = el; temp = el;
while ((temp !== null) && (temp.tagName !== "BODY")) { while ((temp !== null) && (temp.tagName !== "BODY")) {
if (eval("temp." + type) === value) { if (eval("temp." + type) === value) {
...@@ -214,15 +240,9 @@ function start() { ...@@ -214,15 +240,9 @@ function start() {
return temp; return temp;
} }
// 获取offset 改变鼠标指针 // 获取offset 改变鼠标指针
variablePointer(el, e) { static variablePointer(el, e) {
var spacingX, spacingY, differ, dir, deg = el.style.transform.replace(/[^0-9.]/ig,"") var dir, deg = el.style.transform.replace(/[^0-9.]/ig,"")
deg = deg ? deg : 0 deg = deg ? deg : 0
dir = ""
spacingX = e.offsetX
spacingY = e.offsetY
differ = 15
// 根据坐标大小添加鼠标指针 // 根据坐标大小添加鼠标指针
if(el.tagName === 'SPAN'){ if(el.tagName === 'SPAN'){
if (e.srcElement.nodeName === 'CANVAS' && e.offsetY < 23) { if (e.srcElement.nodeName === 'CANVAS' && e.offsetY < 23) {
...@@ -244,7 +264,7 @@ function start() { ...@@ -244,7 +264,7 @@ function start() {
} }
} }
// 绘制旋转图 // 绘制旋转图
drawColumn (e) { static drawColumn (e) {
var imageCanvas = e.lastElementChild var imageCanvas = e.lastElementChild
var ctx = imageCanvas.getContext("2d") var ctx = imageCanvas.getContext("2d")
ctx.beginPath() ctx.beginPath()
...@@ -254,9 +274,9 @@ function start() { ...@@ -254,9 +274,9 @@ function start() {
ctx.strokeStyle="peru" ctx.strokeStyle="peru"
ctx.stroke() ctx.stroke()
} }
// 旋转角度赋值
movehandle (e) { static movehandle (e) {
dis = mobile.prototype.angle(centerX, centerY, e.clientX, e.clientY) dis = mobile.angle(centerX, centerY, e.clientX, e.clientY)
if (debug) { if (debug) {
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'],
...@@ -275,7 +295,7 @@ function start() { ...@@ -275,7 +295,7 @@ function start() {
} }
} }
// 计算两点的线在页面中的角度 // 计算两点的线在页面中的角度
angle (centerx, centery, endx, endy) { static angle (centerx, centery, endx, endy) {
var diff_x = endx - centerx, var diff_x = endx - centerx,
diff_y = endy - centery diff_y = endy - centery
var c = 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI) var c = 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI)
...@@ -283,58 +303,11 @@ function start() { ...@@ -283,58 +303,11 @@ function start() {
return c + 90 return c + 90
} }
} }
// 获取坐标构造函数
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 + canvas.scrollLeft - canvas.clientLeft
y = e.clientY + canvas.scrollTop - canvas.clientTop
}
return {
x: x,
y: y
}
}
// 梯形
trapezoid (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'])
}
}
function drop (event) { function drop (event) {
createEl.removeAttribute("draggable") createEl.removeAttribute("draggable")
canvas.appendChild(createEl) drawBox.appendChild(createEl)
mobile.prototype.drawTable(event, createEl) mobile.prototype.drawTable(event, createEl)
} }
...@@ -346,14 +319,22 @@ function start() { ...@@ -346,14 +319,22 @@ function start() {
centerX = 0 // 鼠标松开重新设置x圆点 centerX = 0 // 鼠标松开重新设置x圆点
centerY = 0 // 鼠标松开重新设置y圆点 centerY = 0 // 鼠标松开重新设置y圆点
} }
canvas.onmousedown = mobile.prototype.mousedown drawBox.onmousedown = mobile.prototype.mousedown
canvas.onmouseup = mouseup drawBox.onmouseup = mouseup
give.ondrop = drop canvas.ondrop = drop
} }
/**
* 鼠标拖动事件
* @param {*dragStart}
*/
function dragStart (event) { function dragStart (event) {
let node = event.target let node = event.target
createEl = node.cloneNode(true) createEl = node.cloneNode(true)
} }
/**
* 鼠标拖动事件
* @param {*allowDrop}
*/
function allowDrop (event) { function allowDrop (event) {
event.preventDefault() event.preventDefault()
} }
......
src/changeImage.js
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
* 梯形 * 梯形
*/ */
export class changeTrapezoidPlace { export class changeTrapezoidPlace {
constructor() {
}
// 梯形左 // 梯形左
trapezoidLeft (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)
...@@ -13,7 +11,6 @@ export class changeTrapezoidPlace { ...@@ -13,7 +11,6 @@ export class changeTrapezoidPlace {
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('左左左左左左')
} }
// 梯形top height // 梯形top height
trapezoidTopHeight (storageMark, xMin, yMin) { trapezoidTopHeight (storageMark, xMin, yMin) {
...@@ -40,34 +37,99 @@ export class changeTrapezoidPlace { ...@@ -40,34 +37,99 @@ export class changeTrapezoidPlace {
} }
// 圆 部分公共坐标 // 圆 部分公共坐标
export class changeCircle { export class changeCircle {
constructor() {
}
// 改变左宽度 // 改变左宽度
circleWidth (storageMark, xMin, yMin) { circleWidth (storageMark, xMin, yMin, name) {
var circle_width = Math.max(xMin, storageMark.width - window.event.clientX + storageMark.grabx) var circle_width = Math.max(xMin, storageMark.width - window.event.clientX + storageMark.grabx) + 'px'
storageMark.el.style.width = circle_width + 'px' // 这里判断准备在html传递最小值，以作动态判断
storageMark.el.firstElementChild.style.width = circle_width + 'px' 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' 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))
if(storageMark.el.firstElementChild.className === 'bath-box') {
console.log(storageMark.el.firstElementChild)
} }
} }
// 改变右宽 // 改变右宽
circleRightWidth (storageMark, xMin) { circleRightWidth (storageMark, xMin, yMin, name) {
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) + 'px'
if(parseInt(circle_width)>108 || name === 'arc'){
storageMark.el.style.width = circle_width storageMark.el.style.width = circle_width
storageMark.el.firstElementChild.style.width = circle_width storageMark.el.firstElementChild.style.width = circle_width
this.bathtub(storageMark, parseInt(circle_width))
}
} }
// 改变top高度 // 改变top高度
circleTopHeight (storageMark, xMin, yMin) { 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.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.style.height = height
storageMark.el.firstElementChild.style.height = storageMark.el.style.height storageMark.el.firstElementChild.style.height = height
this.bathtub(storageMark, undefined, parseInt(height))
}
} }
// 改变高度 // 改变高度
circleHeight (storageMark, xMin, yMin) { circleHeight (storageMark, xMin, yMin, name) {
storageMark.el.style.height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px' let height = Math.max(yMin, storageMark.height + window.event.clientY - storageMark.graby) + 'px'
storageMark.el.firstElementChild.style.height = storageMark.el.style.height 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> <template>
<div class="container"> <div class="container">
<!-- 图形建造box -->
<div class="sidebar left"> <div class="sidebar left">
<!-- 梯形 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="Trapezoid"> <span class="box left" @dragstart="dragStart($event)" draggable="true" name="Trapezoid">
<div class="bench" style="width: 28px;"> <div class="bench" style="width: 28px;">
<div class="group"> <div class="group">
...@@ -16,7 +17,8 @@ ...@@ -16,7 +17,8 @@
</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"> <!-- 圆 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="arc">
<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 +29,19 @@ ...@@ -27,6 +29,19 @@
</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">
<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"> <span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<div class="double-bed"> <div class="double-bed">
<div class="group"> <div class="group">
...@@ -42,7 +57,8 @@ ...@@ -42,7 +57,8 @@
</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"> <!-- 单人床 -->
<span class="box left" @dragstart="dragStart($event)" draggable="true" name="arc">
<div class="single-bed"> <div class="single-bed">
<div class="group"> <div class="group">
<div class="mouse-first"></div> <div class="mouse-first"></div>
...@@ -56,6 +72,7 @@ ...@@ -56,6 +72,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="public"> <span class="box left" @dragstart="dragStart($event)" draggable="true" name="public">
<div class="bath-box"> <div class="bath-box">
<div class="group"> <div class="group">
...@@ -67,11 +84,46 @@ ...@@ -67,11 +84,46 @@
<div class="bath-ridge"> <div class="bath-ridge">
</div> </div>
<div class="bath-faucet"></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> </div>
<canvas class="shape_rotater" width="20" height="40"></canvas> <canvas class="shape_rotater" width="20" height="40"></canvas>
</span> </span>
</div> </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> <canvas :width="canvasWidth" height="800" id="myCanvas" @dragover="allowDrop($event)"></canvas>
</div> </div>
</div> </div>
...@@ -85,10 +137,12 @@ export default { ...@@ -85,10 +137,12 @@ export default {
} }
}, },
mounted () { mounted () {
// 获取canvas的width
this.canvasWidth = document.querySelector('.canvas').offsetWidth this.canvasWidth = document.querySelector('.canvas').offsetWidth
this.Canvas.start() this.Canvas.start()
}, },
methods: { methods: {
// 鼠标拖拽事件
dragStart (event) { dragStart (event) {
this.Canvas.dragStart(event) this.Canvas.dragStart(event)
}, },
...@@ -98,236 +152,3 @@ export default { ...@@ -98,236 +152,3 @@ export default {
} }
} }
</script> </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' ...@@ -4,7 +4,8 @@ import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import Canvas from './canvas' import Canvas from './canvas'
import './style/graph.css'
import './style/index.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.Canvas = Canvas Vue.prototype.Canvas = Canvas
/* eslint-disable no-new */ /* 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论