液化
This commit is contained in:
X1627315083
@@ -3,7 +3,7 @@
|
||||
class="liquefaction generalModel"
|
||||
v-model:visible="liqufeaction"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
@@ -17,254 +17,295 @@
|
||||
</div>
|
||||
|
||||
<div class="liquefaction_center">
|
||||
<div class="liquefaction_canvas_box">
|
||||
<canvas id="c"></canvas>
|
||||
<div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
|
||||
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
|
||||
</div>
|
||||
<div class="liquefaction_parameter">
|
||||
<div class="liquefaction_parameter_item">
|
||||
<div class="liquefaction_parameter_item_title">
|
||||
<span>{{ $t('exportModel.Size') }}</span>
|
||||
<input type="number" v-model="routes" @change="routesChange('routes')">
|
||||
</div>
|
||||
<div class="liquefaction_parameter_item_input">
|
||||
<input type="range" v-model="routes" @change="routesChange('routes')">
|
||||
</div>
|
||||
</div>
|
||||
<div class="liquefaction_parameter_item">
|
||||
<div class="liquefaction_parameter_item_title">
|
||||
<span>{{ $t('exportModel.density') }}</span>
|
||||
<input type="number" v-model="density" @change="routesChange('density')">
|
||||
</div>
|
||||
<div class="liquefaction_parameter_item_input">
|
||||
<input type="range" v-model="density" @change="routesChange('density')">
|
||||
</div>
|
||||
</div>
|
||||
<div class="liquefaction_parameter_item">
|
||||
<div class="generage_btn started_btn" @click="cancelDsign">取消</div>
|
||||
<div class="generage_btn started_btn" @click="submit">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- <div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div> -->
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime } from "@/tool/util";
|
||||
import { setCookie, getCookie } from "@/tool/cookie";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import allOrder from "@/component/Pay/allOrder.vue";
|
||||
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
creditsDetail,
|
||||
allOrder,
|
||||
},
|
||||
emits: ['setSloganData'],
|
||||
emits: ['submitLiquefaction'],
|
||||
setup(props,{emit}) {
|
||||
let presentState = ref('paypal');
|
||||
let liqufeaction = ref(false);
|
||||
let loadingShow = ref(false);
|
||||
let { t } = useI18n();
|
||||
let canvas = reactive({});
|
||||
let scale = 2;
|
||||
let ratio = [1,1]
|
||||
let exportWH = 512
|
||||
let pencilbtnStyle = ref({
|
||||
background:'',
|
||||
width:0+'px',
|
||||
height:0+'px',
|
||||
display:'none',
|
||||
left:0+'px',
|
||||
top:0+'px',
|
||||
// let presentState = ref('paypal');
|
||||
let liqufeaction = ref(false);
|
||||
let liqufeactionData = reactive({
|
||||
routes: 90,//移动框大小
|
||||
density: 80,//移动大小
|
||||
})
|
||||
let canvasBtn = reactive({
|
||||
canvasState:'move',
|
||||
canvasPencilWidth:{
|
||||
pencil:4,
|
||||
eraser:4,
|
||||
let arrows = ref({
|
||||
show:false,
|
||||
domStyle:{
|
||||
left:0,
|
||||
top:0,
|
||||
width:0,
|
||||
height:0,
|
||||
},
|
||||
spreadState:false,
|
||||
jiantouStyle:{
|
||||
height:'1px',
|
||||
transform:`translateY(-100%) rotate(${90}deg)`,
|
||||
}
|
||||
})
|
||||
let canvasWH = ref(0);
|
||||
onMounted(()=>{
|
||||
})
|
||||
let exportUrl = ''
|
||||
let reverseCanvasState = ref([])//存放canvas操作
|
||||
let normalCanvasState = ref([])//存放canvas操作
|
||||
let canvasState = ref()//存放canvas操作
|
||||
let keyDown = []//监听键盘的 keydown 和 keyup 事件
|
||||
let init = (data)=>{
|
||||
console.log(data);
|
||||
console.log(123);
|
||||
let canvas
|
||||
let canvasImgData = {
|
||||
width:0,
|
||||
height:0,
|
||||
}
|
||||
let downX
|
||||
let downY
|
||||
let init = async (data)=>{
|
||||
liqufeaction.value = true
|
||||
await new Promise((resolve, reject) => {
|
||||
nextTick(()=>{
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
let img = new Image()
|
||||
img.setAttribute('crossOrigin', 'Anonymous')
|
||||
img.onload = () => {
|
||||
let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
|
||||
let width = canvasBox.offsetHeight / img.height * img.width
|
||||
canvas = document.getElementById('c')
|
||||
canvas.width = width
|
||||
canvas.height = canvasBox.offsetHeight
|
||||
let optfor = false
|
||||
const context = canvas.getContext('2d');
|
||||
context.drawImage(img, 1, 1, canvas.width, canvas.height);
|
||||
let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
|
||||
|
||||
let canvasDownX
|
||||
let canvasDownY
|
||||
let distance = 0
|
||||
let angle
|
||||
let mousedown = (event)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
down(e)
|
||||
}
|
||||
let touchdown = (event)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
down(e)
|
||||
}
|
||||
let down = (event)=> {
|
||||
let canvasPosition = canvas.getBoundingClientRect()
|
||||
let maxX = canvasPosition.width + canvasPosition.x
|
||||
let minX = canvasPosition.x
|
||||
let maxY = canvasPosition.height + canvasPosition.y
|
||||
let minY = canvasPosition.y
|
||||
if (event.clientX > minX && event.clientX < maxX && event.clientY > minY && event.clientY < maxY) {
|
||||
downX = event.clientX
|
||||
downY = event.clientY
|
||||
canvasDownX = downX - minX
|
||||
canvasDownY = downY - minY
|
||||
}
|
||||
optfor = true
|
||||
arrows.value.jiantouStyle.height = distance + 'px'
|
||||
arrows.value.jiantouStyle.left = event.clientX - canvasBox.getBoundingClientRect().left + 'px'
|
||||
arrows.value.jiantouStyle.top = event.clientY - canvasBox.getBoundingClientRect().top + 'px'
|
||||
arrows.value.domStyle.width = liqufeactionData.routes * 2 + 'px'
|
||||
arrows.value.domStyle.height = liqufeactionData.routes * 2 + 'px'
|
||||
arrows.value.domStyle.left = event.clientX - canvasBox.getBoundingClientRect().left - liqufeactionData.routes + 'px'
|
||||
arrows.value.domStyle.top = event.clientY - canvasBox.getBoundingClientRect().top - liqufeactionData.routes + 'px'
|
||||
arrows.value.show = true
|
||||
let mouseup = ()=>{
|
||||
if(!optfor)return
|
||||
if(distance != 0){
|
||||
let {upDownX, upDownY} = calculateTargetCoordinates(canvasDownX, canvasDownY,distance,angle)
|
||||
liquify(imgData, canvasDownX, canvasDownY, upDownX, upDownY, liqufeactionData.routes, liqufeactionData.density)
|
||||
}
|
||||
distance = 0
|
||||
arrows.value.show = false
|
||||
context.putImageData(imgData, 0, 0);
|
||||
optfor = false
|
||||
canvasBox.removeEventListener('mousemove', mouseMove);
|
||||
canvasBox.removeEventListener('touchmove', touchmove);
|
||||
document.removeEventListener('mouseup', mouseup);
|
||||
document.removeEventListener('touchend', mouseup);
|
||||
}
|
||||
canvasBox.addEventListener('mousemove', mouseMove);
|
||||
canvasBox.addEventListener('touchmove', touchmove);
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
document.addEventListener('touchend', mouseup);
|
||||
}
|
||||
let mouseMove = (event)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
move(e)
|
||||
}
|
||||
let touchmove = (event)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
move(e)
|
||||
}
|
||||
let move = function (moveEvent) {
|
||||
let height = distanceFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
|
||||
if(optfor){
|
||||
let height = distanceFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
|
||||
angle = angleFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
|
||||
|
||||
if(height < liqufeactionData.routes){
|
||||
distance = height
|
||||
arrows.value.jiantouStyle.height = height + 'px'
|
||||
}
|
||||
arrows.value.jiantouStyle.transform = `translateY(-100%) rotate(${angle+90}deg)`
|
||||
|
||||
}
|
||||
}
|
||||
// canvas.addEventListener('mousedown', down);
|
||||
canvasBox.addEventListener('mousedown', mousedown);
|
||||
canvasBox.addEventListener('touchstart', touchdown);
|
||||
}
|
||||
img.src = data._element.src
|
||||
}
|
||||
let canvasKeyDown = (event) => {
|
||||
if(keyDown.indexOf(event.key)>-1){
|
||||
}else{
|
||||
keyDown.push(event.code)
|
||||
if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
|
||||
historyState('reverse')
|
||||
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
|
||||
historyState('')
|
||||
let distanceSqr = (x1, y1, x2, y2) => sqr(x1 - x2) + sqr(y1 - y2);
|
||||
let sqr = (x) => x * x;;
|
||||
let eachCircleDot = (imageData, ox, oy, r, callback)=>{
|
||||
var imgWidth = imageData.width,
|
||||
imgHeight = imageData.height,
|
||||
data = imageData.data,
|
||||
left = ox - r,
|
||||
right = ox + r,
|
||||
top = oy - r,
|
||||
bottom = oy + r,
|
||||
dotRedOffset, dotGreenOffset, dotBlueOffset, alphaOffset;
|
||||
for (var x = left; x < right; x++){
|
||||
for (var y = top; y < bottom; y++){
|
||||
if (distanceSqr(x, y, ox, oy) <= sqr(r)) {
|
||||
|
||||
dotRedOffset = y * imgWidth * 4 + x * 4;
|
||||
dotGreenOffset = dotRedOffset + 1;
|
||||
dotBlueOffset = dotGreenOffset + 1;
|
||||
alphaOffset = dotBlueOffset + 1;
|
||||
|
||||
callback(
|
||||
// 当前点的坐标
|
||||
{ x: x, y: y },
|
||||
// 点的RGBA四个分量对应字节的下标
|
||||
{
|
||||
r: dotRedOffset,
|
||||
g: dotGreenOffset,
|
||||
b: dotBlueOffset,
|
||||
a: alphaOffset,
|
||||
},
|
||||
// 传进来的ImageData的data部分
|
||||
data
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
let canvasKeyUp = (event) =>{
|
||||
keyDown = keyDown.filter(function(item) {
|
||||
return event.code !== item;
|
||||
})
|
||||
|
||||
let copyImageDataBuff = (imgData)=>{
|
||||
var data = imgData.data,
|
||||
imgDataBuff = [];
|
||||
for (var i in data){
|
||||
imgDataBuff[i] = data[i];
|
||||
}
|
||||
let clearCanvas = ()=>{
|
||||
canvasBtn.canvasState = 'move'
|
||||
canvasBtn.spreadState = false
|
||||
document.removeEventListener("keydown", canvasKeyDown);
|
||||
document.removeEventListener("keyup", canvasKeyUp);
|
||||
return imgDataBuff;
|
||||
}
|
||||
let rgba = 'rgba(0, 0, 0, 1)'
|
||||
let mouseMove = (event)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
setCanvasMove(e)
|
||||
let moveDot = (imgData, dataBuff, x, y, srcX, srcY)=> {
|
||||
|
||||
var imgWidth = imgData.width,
|
||||
imgHeight = imgData.height,
|
||||
data = imgData.data;
|
||||
|
||||
// // 进行边界检查，确保不超出图像范围
|
||||
x = Math.max(0, Math.min(Math.round(x), imgWidth - 1));
|
||||
y = Math.max(0, Math.min(Math.round(y), imgHeight - 1));
|
||||
srcX = Math.max(0, Math.min(Math.round(srcX), imgWidth - 1));
|
||||
srcY = Math.max(0, Math.min(Math.round(srcY), imgHeight - 1));
|
||||
srcX = Math.round(srcX);
|
||||
srcY = Math.round(srcY);
|
||||
|
||||
var targetStartOffset = y * imgWidth * 4 + x * 4,
|
||||
srcStartOffset = srcY * imgWidth * 4 + srcX * 4;
|
||||
for (var i = 0; i < 4; i++)
|
||||
data[targetStartOffset + i] = dataBuff[srcStartOffset + i];
|
||||
}
|
||||
let touchmove = (event)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
setCanvasMove(e)
|
||||
}
|
||||
let setCanvasMove = (event)=>{
|
||||
if(canvas.isDrawingMode){
|
||||
canvas.setCursor('none');
|
||||
}
|
||||
let canvasCenterBox = document.querySelector(".liquefaction .exportCanvasBox_center_box");
|
||||
if(!canvasCenterBox)return
|
||||
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
|
||||
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
|
||||
pencilbtnStyle.value.left = parentX + "px"
|
||||
pencilbtnStyle.value.top = parentY+'px'
|
||||
}
|
||||
let setOperation = (str)=>{
|
||||
canvasBtn.canvasState = str
|
||||
if(str == 'move'){
|
||||
setMove()
|
||||
pencilbtnStyle.value.display = `none`
|
||||
}else if(str == 'pencil'){
|
||||
setPencil()
|
||||
pencilbtnStyle.value.display = `block`
|
||||
}else if(str == 'eraser'){
|
||||
setEraser()
|
||||
pencilbtnStyle.value.display = `block`
|
||||
}
|
||||
}
|
||||
let setMove = ()=>{
|
||||
canvas.isDrawingMode = false
|
||||
canvas.forEachObject((obj) =>obj.selectable = true);
|
||||
}
|
||||
let setPencil = ()=>{
|
||||
canvas.isDrawingMode = true//开启绘画模式
|
||||
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
||||
canvas.freeDrawingBrush.color = rgba
|
||||
pencilbtnStyle.value.background = rgba
|
||||
canvas.freeDrawingBrush.isEraser = false
|
||||
setPencilWidth()
|
||||
}
|
||||
let setEraser = ()=>{
|
||||
canvas.isDrawingMode = true
|
||||
let eraser = new fabric.EraserBrush(canvas)
|
||||
canvas.freeDrawingBrush = eraser
|
||||
canvas.requestRenderAll();
|
||||
canvas.freeDrawingBrush.isEraser = true
|
||||
pencilbtnStyle.value.background = `rgb(255,255,255)`
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
||||
setPencilWidth()
|
||||
}
|
||||
let deleteObj = ()=> {
|
||||
// if(!canvas.getActiveObjects()){
|
||||
// return
|
||||
// }
|
||||
let target = canvas.getActiveObjects()
|
||||
target.forEach((item)=>{
|
||||
canvas.fxRemove(item, {
|
||||
onComplete(){
|
||||
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||
canvas.renderAll(); // 重新渲染 Canvas
|
||||
}
|
||||
})
|
||||
canvas.FX_DURATION = 300
|
||||
})
|
||||
}
|
||||
let setTimeOutWidth
|
||||
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||||
clearTimeout(setTimeOutWidth)
|
||||
setTimeOutWidth = setTimeout(()=>{
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
|
||||
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
|
||||
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
|
||||
},300)
|
||||
}
|
||||
let updateCanvasState = (str) =>{
|
||||
if(str != 'mouseUp'){
|
||||
}
|
||||
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||||
normalCanvasState.value.push(canvasAsJson);
|
||||
}
|
||||
//撤回
|
||||
let historyState = (str)=> {
|
||||
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
|
||||
let obj = reverseCanvasState.value.pop()
|
||||
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
|
||||
canvasState.value = obj
|
||||
normalCanvasState.value.push(obj);
|
||||
}else if(str == '' && normalCanvasState.value.length > 1){
|
||||
let obj = normalCanvasState.value.pop()
|
||||
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
|
||||
reverseCanvasState.value.push(obj);
|
||||
}else{
|
||||
return
|
||||
}
|
||||
canvas.loadFromJSON(canvasState.value, () => {});
|
||||
}
|
||||
let setSubmit = ()=>{
|
||||
var allObjects = canvas.getObjects('path');
|
||||
// if(allObjects.length == 0){
|
||||
// return message.info(t('addDetails.jsContent1'))
|
||||
// }
|
||||
var canvasDom = document.createElement("canvas");
|
||||
let exportCanvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "rgba(255, 255, 255,1)",
|
||||
width: exportWH * ratio[0],
|
||||
height: exportWH * ratio[1],
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
let liquify = (imgData, cx, cy, mx, my, r, strenth) => {
|
||||
var imgDataBuff = copyImageDataBuff(imgData);
|
||||
eachCircleDot(imgData, cx, cy, r, function (posi) {
|
||||
var tx = posi.x,
|
||||
ty = posi.y;
|
||||
var u = transFormula(cx, cy, mx, my, tx, ty, r, strenth);
|
||||
moveDot(imgData, imgDataBuff, tx, ty, u.x, u.y);
|
||||
function transFormula(cx, cy, mx, my, tx, ty, r, strenth) {
|
||||
strenth = strenth || 100;
|
||||
var relativity = sqr(r) - distanceSqr(tx, ty, cx, cy);
|
||||
var distanceMovedSqr = distanceSqr(mx, my, cx, cy);
|
||||
var rate = sqr(relativity / (relativity + distanceMovedSqr * (100 / strenth)));
|
||||
var ux = tx - rate * (mx - cx),
|
||||
uy = ty - rate * (my - cy);
|
||||
return { x: ux, y: uy };
|
||||
}
|
||||
});
|
||||
canvas.backgroundImage.clone((back)=>{
|
||||
back.set({
|
||||
scaleX:1,
|
||||
scaleY:1,
|
||||
left:back.left*scale,
|
||||
top:back.top*scale ,
|
||||
})
|
||||
exportCanvas.backgroundImage = back
|
||||
allObjects.forEach((item,index)=>{
|
||||
// let obj = fabric.util.object.clone(item);
|
||||
if(item.type == 'circle')return
|
||||
let obj
|
||||
item.clone((cloned)=>{
|
||||
obj = cloned
|
||||
})
|
||||
obj.set(
|
||||
{
|
||||
scaleX:(item.scaleX?item.scaleX:1)*scale,
|
||||
scaleY:(item.scaleY?item.scaleY:1)*scale,
|
||||
left:item.left*scale,
|
||||
top:item.top*scale,
|
||||
}
|
||||
)
|
||||
exportCanvas.add(obj)
|
||||
})
|
||||
let data = exportCanvas.toDataURL('jpg')
|
||||
cancelDsign()
|
||||
clearCanvas()
|
||||
emit('setSloganData',data)
|
||||
})
|
||||
}
|
||||
let distanceFun = (x1, y1, x2, y2) => {
|
||||
return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
|
||||
}
|
||||
let angleFun = (x1, y1, x2, y2) => {
|
||||
return Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);
|
||||
}
|
||||
let calculateTargetCoordinates = (x1, y1, distance, angleDegrees) => {
|
||||
let angleRad = angleDegrees * (Math.PI / 180);
|
||||
let x2 = x1 + distance * Math.cos(angleRad);
|
||||
let y2 = y1 + distance * Math.sin(angleRad);
|
||||
return { upDownX: x2, upDownY: y2 };
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
document.removeEventListener('keydown',canvasKeyDown);
|
||||
document.removeEventListener('keyup', canvasKeyUp);
|
||||
liqufeaction.value = false
|
||||
}
|
||||
let routesChange = (str)=>{
|
||||
liqufeactionData[str] = Math.round(liqufeactionData[str]/10)*10;
|
||||
if (liqufeactionData[str] < 10) {
|
||||
liqufeactionData[str] = 10; // 设置为最小值
|
||||
} else if (liqufeactionData[str] > 100) {
|
||||
liqufeactionData[str] = 100; // 设置为最大值
|
||||
}
|
||||
}
|
||||
let submit = ()=>{
|
||||
emit('submitLiquefaction',canvas.toDataURL('image/png'))
|
||||
cancelDsign()
|
||||
}
|
||||
return {
|
||||
presentState,
|
||||
liqufeaction,
|
||||
loadingShow,
|
||||
t,
|
||||
pencilbtnStyle,
|
||||
...toRefs(canvasBtn),
|
||||
...toRefs(liqufeactionData),
|
||||
arrows,
|
||||
init,
|
||||
setOperation,
|
||||
setPencilWidth,
|
||||
historyState,
|
||||
setSubmit,
|
||||
cancelDsign,
|
||||
routesChange,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -279,6 +320,83 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.liquefaction {
|
||||
|
||||
background: #f9fafb;
|
||||
.liquefaction_center{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.liquefaction_canvas_box{
|
||||
background: #fff;
|
||||
height: 90%;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
// overflow-x: auto;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.liquefaction_parameter{
|
||||
padding-top: 5rem;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
.liquefaction_parameter_item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.liquefaction_parameter_item_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
input{
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.liquefaction_parameter_item_input{
|
||||
width: 100%;
|
||||
input{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.liquefaction_parameter_item:last-child{
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
div{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.moveDom {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jiantouDom {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
transform-origin: center bottom;
|
||||
transform: translateY(-100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jiantouDom::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
border-top: 2px solid #000;
|
||||
border-left: 2px solid #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user