Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

优化:打印支持纵向

Browse Source
pull/2293/MERGE
ChenX 1 year ago
parent 3adacaa479
commit 96ae02c57d
1 changed files with 27 additions and 603 deletions
Show Stats Download Patch File Download Diff File

630
src/Add-on/Print.ts
Unescape View File

@ -1,4 +1,3 @@
import { Intent } from "@blueprintjs/core";
import { Color, Line, Object3D, Scene, Vector3 } from "three";
import { app } from "../ApplicationServices/Application";
import { HostApplicationServices } from "../ApplicationServices/HostApplicationServices";
@ -7,21 +6,16 @@ import { LogType } from "../Common/Log";
import { Sleep } from "../Common/Sleep";
import { AAType } from "../Common/SystemEnum";
import { Hole } from "../DatabaseServices/3DSolid/Hole";
import { SweepSolid } from "../DatabaseServices/3DSolid/SweepSolid";
import { CADFiler } from "../DatabaseServices/CADFiler";
import { AlignedDimension } from "../DatabaseServices/Dimension/AlignedDimension";
import { Board } from "../DatabaseServices/Entity/Board";
import { CompositeEntity } from "../DatabaseServices/Entity/CompositeEntity";
import { Curve } from "../DatabaseServices/Entity/Curve";
import { Entity } from "../DatabaseServices/Entity/Entity";
import { Text } from "../DatabaseServices/Text/Text";
import { ViewportEntity } from "../DatabaseServices/ViewportEntity";
import { Command } from "../Editor/CommandMachine";
import { PromptStatus } from "../Editor/PromptResult";
import { GetBox, XAxis, YAxis, ZAxis, isParallelTo } from "../Geometry/GeUtils";
import { RenderType } from "../GraphicsSystem/RenderType";
import { HotCMD } from "../Hot/HotCommand";
import { AppToaster } from "../UI/Components/Toaster";
@HotCMD
export class Print implements Command
@ -88,596 +82,7 @@ function FilterDim(dir: Vector3, ens: Entity[], isHideText = false)
}
return handEns;
}
const IsOnlyRenderType = e => e instanceof CompositeEntity || e instanceof Curve || e instanceof Text;
async function PrintImage(ens: Entity[])
{
const IMG_WIDHT = 715 * 2;
const IMG_HEIGHT = 430 * 2;
let dirs = [XAxis, new Vector3(0, 0, -1), YAxis, app.Viewer.CameraCtrl.Direction];
let imgUrls: string[] = [];
//备份视图
let sceneBak = app.Viewer.Scene;
let renderTypeBak = HostApplicationServices._renderType;
let aabak = app.Viewer.AAType;
let clearColorBak = app.Viewer.Renderer.getClearColor().clone();
let f = new CADFiler();
app.Viewer.CameraCtrl.WriteFile(f);
//设置视图
app.Viewer.Scene = new Scene();
app.Viewer.AAType = AAType.SMAA;
HostApplicationServices._renderType = RenderType.Print;
app.Viewer.OnSize(IMG_WIDHT, IMG_HEIGHT);
app.Viewer.Renderer.setClearColor("#fff");
app.Viewer.UpdateRender();
//绘制
for (let e of ens)
{
if (e instanceof ViewportEntity)
{
let o = e.DrawObject;
(o.children[0].children[0] as Line).material = ColorMaterial.TransparentLineMaterial;
app.Viewer.Scene.add(o);
}
else
{
app.Viewer.Scene.add(e.GetDrawObjectFromRenderType(e.IsOnlyRender ? RenderType.WireframePrint : RenderType.Print));
}
}
//等待字体加载完
await Sleep(10);
if (ens.length === 1 && ens[0] instanceof SweepSolid)
app.Viewer.CameraCtrl.LookAt(new Vector3(0, 0, -1));
app.Viewer.ZoomAll(false);
app.Viewer.Zoom(1);
for (let dir of dirs)
{
let handleObjs = FilterDim(dir, ens);
app.Viewer.CameraCtrl.LookAt(dir);
//生成预览图
app.Viewer.Render();
let url = app.Viewer.Renderer.domElement.toDataURL("image/jpeg", 1.0);
imgUrls.push(url);
handleObjs.forEach(obj =>
{
obj.visible = true;
});
}
//还原视图
[app.Viewer.Scene, sceneBak] = [sceneBak, app.Viewer.Scene];
HostApplicationServices._renderType = renderTypeBak;
app.Viewer.Renderer.setClearColor(clearColorBak);
app.Viewer._AAType = aabak;
f.Reset();
app.Viewer.CameraCtrl.ReadFile(f);
app.Viewer.OnSize();
var win = window.open();
if (!win)
{
AppToaster.show({
message: "检测是否有窗口被浏览器拦截",
timeout: 3000,
intent: Intent.DANGER
});
return;
}
win.document.body.style.border = "10px double #000";
let style = document.createElement("style");
const FOOTER_HEIGHT = 80;
style.innerHTML = `
.flex{
display:flex;
}
*{
box-sizing: border-box;
}
body{
margin:0;
padding:0;
width:1450px;
height:960px;
margin:0 auto;
display:flex;
flex-direction: column;
}
.footer{
display:flex;
height:${FOOTER_HEIGHT}px;
}
.footer>div,.footer>input{
outline:1px solid #000;
line-height:${FOOTER_HEIGHT}px;
}
.footer>div>div{
outline:1px solid #000;
height:${FOOTER_HEIGHT / 2}px;
line-height:${FOOTER_HEIGHT / 2}px;
}
.label-input{
display:flex;
}
.label-input>div{
width:65px !important;
}
.label-input>input{
width:calc(100% - 65px);
}
.img-container{
width:715;
height:430px;
overflow:hidden;
position:absolute;
user-select: none;
outline:none;
}
.img-container:hover{
outline:2px solid #ccc;
z-index:1;
}
.img-container.drag{
z-index:2;
}
.img-container:nth-child(1){
left:0;
top:0;
}
.img-container:nth-child(2){
left:715px;
top:0;
}
.img-container:nth-child(3){
left:0;
top:429px;
}
.img-container:nth-child(4){
left:715px;
top:429px;
}
img{
width:715px;
}
.border{
position:absolute;
display: block;
border: 2px solid transparent;
}
.border:hover{
border: 2px solid #ccc;
}
.left{
left:0;
top:5px;
width: 0;
height: calc(100% - 10px);
}
.right{
right:0;
top:5px;
width: 0;
height: calc(100% - 10px);
}
.up{
left:5px;
top:0;
width: calc(100% - 10px);
height: 0;
}
.down{
left:5px;
bottom:0;
width: calc(100% - 10px);
height: 0;
}
.point{
position:absolute;
display: block;
width:5px;
height:5px;
z-index:1;
}
.point:hover{
background:#ccc;
}
.left-up{
left:0;
top:0;
}
.left-down{
left:0;
bottom:0;
}
.right-up{
right:0;
top:0;
}
.right-down{
right:0;
bottom:0;
}
`;
win.document.head.append(style);
let div = document.createElement("div");
div.style.position = "relative";
// div.style.flexWrap = "wrap";
div.style.overflow = "hidden";
div.style.flex = "1";
for (let url of imgUrls)
{
CreateImgContainer(url, div);
}
//添加视图 交互
// window["value"] = win;
// win["imgs"] = new Proxy(imgUrls, {
// get(target, key, receiver)
// {
// return Reflect.get(target, key, receiver);
// },
// set(target, key, value, receiver)
// {
// win.console.log(value);
// return Reflect.set(target, key, value, receiver);
// }
// });
win.document.body.append(div);
const script = document.createElement('script');
script.innerHTML = `
let imgs=document.getElementsByTagName("img");
const S=0.05;
const D=2;
document.onkeydown=e=>{
console.log(e.keyCode);
if(e.target.className==="img-container"){
let img=e.target.children[0];
let scale=Number(img.getAttribute("data-scale"));
let x=Number(img.getAttribute("data-x"));
let y=Number(img.getAttribute("data-y"));
if(e.keyCode===107||e.keyCode===187){
//放大图
scale+=S;
}
else if(e.keyCode===109||e.keyCode===189){
//缩小
scale-=S;
}
else if(e.keyCode===38){
//上
y-=D;
}
else if(e.keyCode===40){
//下
y+=D;
}
else if(e.keyCode===37){
//左
x-=D;
}
else if(e.keyCode===39){
//右
x+=D;
}
e.stopPropagation();
e.preventDefault();
img.setAttribute('data-scale', scale.toString());
img.setAttribute('data-x', x.toString());
img.setAttribute('data-y', y.toString());
img.style.transform="scale("+scale+")"+" translateX("+x+"px)"+" translateY("+y+"px)";
}
else{
for(let img of imgs){
let scale=Number(img.getAttribute("data-scale"));
let x=Number(img.getAttribute("data-x"));
let y=Number(img.getAttribute("data-y"));
if(e.keyCode===107||e.keyCode===187){
//放大图
scale+=S;
}
else if(e.keyCode===109||e.keyCode===189){
//缩小
scale-=S;
}
img.setAttribute('data-scale', scale.toString());
img.style.transform="scale("+scale+")"+" translateX("+x+"px)"+" translateY("+y+"px)";
}
}
}
let startX;
let startY;
let startDrag = false;
let startMove = false;
let dir = -1;
let startMoveImg=false;
let currentEl;
let currentLeft;
let currentRight;
function moveLeft(e){
let x = e.clientX;
let offsetX = startX-x;
let left = currentEl.offsetLeft;
let nowLeft = left - offsetX;
currentEl.style.width = currentEl.offsetWidth + offsetX;
currentEl.style.left = nowLeft + "px";
}
function moveRight(e){
let x = e.clientX;
let offsetX = startX-x;
currentEl.style.width = currentEl.offsetWidth - offsetX;
}
function moveUp(e){
let y=e.clientY;
let offsetY = startY-y;
let top = currentEl.offsetTop;
let nowTop = top - offsetY;
currentEl.style.height = currentEl.offsetHeight + offsetY;
currentEl.style.top = nowTop + "px";
}
function moveDown(e){
let y=e.clientY;
let offsetY = startY-y;
currentEl.style.height = currentEl.offsetHeight-offsetY;
}
document.onmousemove = (e) =>
{
e.preventDefault();
e.stopPropagation();
if(startMoveImg){
let img=currentEl;
let scale=Number(img.getAttribute("data-scale"));
let tx=Number(img.getAttribute("data-x"));
let ty=Number(img.getAttribute("data-y"));
let x=e.clientX;
let y=e.clientY;
let offsetX=x-startX;
let offsetY=y-startY;
tx+=offsetX;
ty+=offsetY;
img.setAttribute('data-scale', scale.toString());
img.setAttribute('data-x', tx.toString());
img.setAttribute('data-y', ty.toString());
img.style.transform="scale("+scale+")"+" translateX("+tx+"px)"+" translateY("+ty+"px)";
startX=e.clientX;
startY=e.clientY;
return;
}
if (startMove) {
let x=e.clientX;
let y=e.clientY;
let left=currentEl.offsetLeft;
let top=currentEl.offsetTop;
let offsetX=x-startX;
let offsetY=y-startY;
currentEl.style.left=left+offsetX;
currentEl.style.top=top+offsetY;
startX=e.clientX;
startY=e.clientY;
return;
}
if (startDrag) {
currentEl.classList.add('drag');
switch (dir) {
case 1: //left
{
moveLeft(e);
break;
}
case 2: //right
{
moveRight(e);
break;
}
case 3: //up
{
moveUp(e);
break;
}
case 4: //down
{
moveDown(e);
break;
}
case 5: //left-up
moveLeft(e);
moveUp(e);
break;
case 6: //left-down
moveLeft(e);
moveDown(e);
break;
case 7: //right-up
moveRight(e);
moveUp(e);
break;
case 8: //right-down
moveRight(e);
moveDown(e);
default:
break;
}
startX = e.clientX;
startY = e.clientY;
return;
}
let el = e.target;
let className = el.className;
if (className.includes('border')||className.includes('point')) {
if(className.includes('border')){
if (className.includes("left")) {
dir = 1;
}
else if (className.includes("right")) {
dir = 2;
}
else if (className.includes("up")) {
dir = 3;
}
else {
dir = 4;
}
}
else{
if (className.includes("left-up")) {
dir = 5;
}
else if (className.includes("left-down")) {
dir = 6;
}
else if (className.includes("right-up")) {
dir = 7;
}
else {
dir = 8;
}
}
if(dir<=2){
document.body.style.cursor="ew-resize";
}
else if(dir<=4){
document.body.style.cursor="ns-resize";
}
else if(dir===5||dir===8){
document.body.style.cursor="nwse-resize";
}
else{
document.body.style.cursor="nesw-resize";
}
currentEl = el.parentElement;
}
else
{
dir = -1;
document.body.style.cursor="default";
}
};
document.onmousedown = e =>
{
if(e.target.nodeName==="IMG"&&e.button===1){
currentEl=e.target;
startMoveImg=true;
startX = e.clientX;
startY = e.clientY;
e.stopPropagation();
e.preventDefault();
}
else{
if (dir > 0) {
startDrag = true;
startX = e.clientX;
startY = e.clientY;
e.stopPropagation();
e.preventDefault();
}
if(e.target.nodeName==="IMG"){
startMove=true;
startX = e.clientX;
startY = e.clientY;
currentEl=e.target.parentElement;
e.stopPropagation();
e.preventDefault();
}
}
};
document.onmouseup = e =>
{
e.stopPropagation();
e.preventDefault();
if(startDrag){
currentEl.classList.remove('drag');
}
startDrag = false;
startMove=false;
startMoveImg=false;
dir = -1;
};
document.onwheel = e =>
{
e.stopPropagation();
e.preventDefault();
if(e.target.nodeName==="IMG"){
let img=e.target;
let scale=Number(img.getAttribute("data-scale"));
let x=Number(img.getAttribute("data-x"));
let y=Number(img.getAttribute("data-y"));
if(e.deltaY<0)
{
//放大
scale+=S;
}
else
{
scale-=S;
}
img.setAttribute('data-scale', scale.toString());
img.setAttribute('data-x', x.toString());
img.setAttribute('data-y', y.toString());
img.style.transform="scale("+scale+")"+" translateX("+x+"px)"+" translateY("+y+"px)";
}
}
`;
CreateFooter(win.document.body);
win.document.body.append(script);
}
function CreateImgContainer(url: string, container: HTMLElement)
{
let d = document.createElement('div');
d.className = "img-container";
d.tabIndex = -1;
let img = new Image();
img.setAttribute('data-scale', "1");
img.setAttribute('data-x', "0");
img.setAttribute('data-y', "0");
img.src = url;
d.append(img);
["left", 'right', 'up', 'down'].forEach(s =>
{
let b = document.createElement("i");
b.className = "border " + s;
d.append(b);
});
["left-up", "left-down", "right-up", "right-down"].forEach(s =>
{
let b = document.createElement("i");
b.className = "point " + s;
d.append(b);
});
container.append(d);
}
function CreateFooter(container: HTMLElement)
{
@ -730,6 +135,7 @@ function CreateFooter(container: HTMLElement)
container.append(footer);
}
//打印选中图形 有个很丑的底部栏
async function PrintImage2(ens: Entity[])
{
let imgUrls: string[] = [];
@ -802,8 +208,8 @@ async function PrintImage2(ens: Entity[])
body{
margin:0;
padding:0;
width:1450px;
height:960px;
width:100%;
height:100%;
margin:0 auto;
display:flex;
flex-direction: column;
@ -836,10 +242,11 @@ async function PrintImage2(ens: Entity[])
let div = document.createElement("div");
div.style.textAlign = "center";
div.style.flex = "1";
div.style.height = "10%";
for (let url of imgUrls)
{
let img = new Image();
img.style.height = "850px";
img.style.height = "100%";
// img.style.marginBottom = "2%";
img.src = url;
div.append(img);
@ -848,6 +255,8 @@ async function PrintImage2(ens: Entity[])
CreateFooter(win.document.body);
// win.print();
}
//在布局空间 打印一个画框
async function PrintImage3(ens: Entity[])
{
const win = GetPrintWindow();
@ -873,8 +282,8 @@ export function GetPrintWindow()
body{
margin:0;
padding:0;
width:1450px;
height:960px;
width:100%;
height:100%;
margin:0 auto;
// display:flex; //因为这个,导致丢失页面
flex-direction: column;
@ -901,6 +310,17 @@ export function GetPrintWindow()
.label-input>input{
width:calc(100% - 65px);
}
@media print {
.centerOnPrintedPage {
display: flex;
align-items: center;
justify-content: center;
}
}
.centerOnPrintedPage {
height: 100%;
}
`;
win.document.head.append(style);
@ -931,7 +351,6 @@ export async function GetImgElement(ens: Entity[], isReset = true)
app.Viewer.Scene = new Scene();
app.Viewer._AAType = AAType.SMAA;
app.Viewer.Renderer.setClearColor("#fff");
app.Viewer.OnSize(1450 * 2, 960 * 2);
//绘制
for (let e of ens)
@ -960,6 +379,10 @@ export async function GetImgElement(ens: Entity[], isReset = true)
box.set(new Vector3(), new Vector3(1000 * (this.Width / this.Height), 1000, 1000));
app.Viewer.CameraControl.ZoomExtentsBox3(box);
app.Viewer.CameraControl.Zoom(1.01);
let size = box.getSize(new Vector3);
size.multiplyScalar(1450 / size.x);
app.Viewer.OnSize(size.x * 2, size.y * 2);
app.Viewer.Render();
let url = app.Viewer.Renderer.domElement.toDataURL("image/jpeg", 1.0);
@ -980,10 +403,11 @@ export async function GetImgElement(ens: Entity[], isReset = true)
let div = document.createElement("div");
div.style.textAlign = "center";
div.style.flex = "1";
div.style.pageBreakBefore = "always";
let img = new Image();
img.style.height = "960px";
img.style.width = "1450px";
img.className = "centerOnPrintedPage";
img.src = url;
div.append(img);

Write Preview
Loading…
Cancel
Save