This commit is contained in:
X1627315083
2024-03-22 12:01:11 +08:00
parent c8f6884e7d
commit 84674c63fd
14 changed files with 475 additions and 623 deletions

View File

@@ -21,14 +21,15 @@
<div class="exportCanvasBox">
<div class="exportCanvasBox_left">
<div class="exportCanvasBox_title">Canvas Size</div>
<label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label>
<label>
<div>Height:</div>
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
</label>
<label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label>
<label>
<div>Height:</div>
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
</label>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
Canvas Nav
<div
@@ -173,12 +174,8 @@
</div>
<div class="exportCanvasBox_right_definition">
<label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label>
<label>
<div>Height:</div>
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
<div>Scale:</div>
<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
</label>
</div>
<!-- <div class="" @click="multiselect">all</div> -->
@@ -197,9 +194,10 @@
</a-modal>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
import {defineComponent, computed, h, ref, nextTick, createVNode, reactive, onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import scaleImage from "@/component/HomePage/scaleImage.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import { useStore } from "vuex";
@@ -215,7 +213,7 @@ export default defineComponent({
ExportNewCoolection,
},
props: ["msg", "sketchCatecoryList"],
setup() {
setup(props,{emit}) {
let driver__ = computed(()=>{
return store.state.Guide.guide
})
@@ -286,6 +284,8 @@ export default defineComponent({
});
canvas.preserveObjectStacking = true;
//鼠标移动
setCanvasKeyDown()//document上添加按下和抬起事件
canvas.on("mouse:over", event =>console.log(123123123123));
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on("mouse:out", event=>setCanvasOut(event));
canvas.on("mouse:down", event=>setCanvasDown(event));
@@ -424,13 +424,13 @@ export default defineComponent({
});
};
let deleteObject = (eventData, transform)=> {
let deleteObject = ()=> {
// var target = [transform.target];
let target = canvas.getActiveObjects()
if(!target){
if(!canvas.getActiveObjects()){
return
}
let target = canvas.getActiveObjects()
target.forEach((item)=>{
// var canvas = item.canvas;
// canvas.remove(item);
@@ -659,7 +659,9 @@ export default defineComponent({
canvasWH.value.width = maxNum;
} else if (str == "height" && canvasWH.value.height >= maxNum) {
canvasWH.value.height = maxNum;
}
}else if(str == 'scale'){
scaleSR.value = scaleSR.value < 1 ? 1:scaleSR.value>4? 4:scaleSR.value
}
canvas.setHeight(canvasWH.value.height);
canvas.setWidth(canvasWH.value.width);
};
@@ -826,11 +828,10 @@ export default defineComponent({
// let brushwork = ref('')
// 监听键盘的 keydown 和 keyup 事件
let keyDown = []
document.addEventListener('keydown', function(event) {
let canvasKeyDown = (event) => {
console.log(123123123);
if(keyDown.indexOf(event.key)>-1){
}else{
keyDown.push(event.code)
if(event.key === 'Enter' && operation.value == 'fold'){
@@ -847,13 +848,20 @@ export default defineComponent({
paste()
}
}
});
document.addEventListener('keyup', function(event) {
keyDown = keyDown.filter(function(item) {
return event.code !== item;
});
});
}
let canvasKeyUp = (event) =>{
keyDown = keyDown.filter(function(item) {
return event.code !== item;
})
}
let setCanvasKeyDown = ()=>{
document.addEventListener('keydown',canvasKeyDown );
document.addEventListener('keyup', canvasKeyUp);
}
let clearCanvasKeyDown = ()=>{
document.removeEventListener('keydown',canvasKeyDown );
document.removeEventListener('keyup', canvasKeyUp);
}
let canvasPencilColor = ref('#000000')
let canvasPencilWidth = ref(20)
let setOperation = (str)=>{
@@ -1133,6 +1141,7 @@ export default defineComponent({
}
let setCanvasOut = (event)=>{
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
clearCanvasKeyDown()//鼠标移出关闭键盘事件
}
//设置再画布上按下
let setCanvasDown = (event)=>{
@@ -1223,14 +1232,55 @@ export default defineComponent({
}
}
let setHDExport = async ()=>{//获取选中内容的位置信息
let imgData = await exportSele(canvas,'jpg')
let img = new Image
img.src = imgData
img.onload = ()=>{
console.log(img.width,img.height);
let {url,imageType} = await exportSele(canvas,'jpg')
if(!imageType){
message.info('Please select the region of SR')
return
}
let img = new Image
img.src = url
let imgStyle = {
'width': '80%',
'max-height': '30rem',
'object-fit': 'contain',
'position': 'relative',
'left': '50%',
'transform': 'translateX(-50%)',
}
let imgElement = createVNode('img',{src:url,style:imgStyle})
img.onload = ()=>{
Modal.confirm({
title: 'SR needs 300 points, whether to continue',
icon: false,
okText: 'Yes',
cancelText: 'No',
content: imgElement,
mask:false,
centered:true,
onOk() {
if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
return
}
let data = {
images: url,
scale: scaleSR.value,
uniqueId: "",
imageType:imageType,
}
Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
console.log(rv);
emit('setTask')
});
},
// onCancel(){
// _this.isShowMark = false
// resolve(false)
// }
});
}
console.log(imgData);
}
let scaleSR = ref(2);
onMounted(() => {});
return {
@@ -1264,6 +1314,7 @@ export default defineComponent({
textureValueChange,//切换材质信息
brushworkValue,//当前笔触
textureValue,//当前材质
scaleSR,
};
},
data(prop) {