24kycj
6720 lines
424 KiB
HTML
6720 lines
424 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>Soon Design</title>
|
|
<link rel="stylesheet" href="./layui/css/layui.css">
|
|
<link rel="stylesheet" href="./public/css/design.css">
|
|
<style>
|
|
#source_front,
|
|
#source_front2,
|
|
#source_back {
|
|
width: 2787px;
|
|
height: 2787px;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layui-fluid main" style="display: none">
|
|
<div class="layui-row" style="height: 100%;width: 100%">
|
|
<div class="col-right">
|
|
<div class="tools-bar right-bar">
|
|
|
|
<div class="mode2">
|
|
<div class="tool">
|
|
<img src="public/images/top24.png" id="top_alignment" language="t" zh="顶部对齐" ozh="頂部對齊"
|
|
en="Top Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/bottom24.png" id="bottom_alignment" language="t" zh="底部对齐"
|
|
ozh="底部對齊" en="Bottom Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/center_y24.png" id="center_y_alignment" language="t" zh="居中对齐"
|
|
ozh="居中對齊" en="Center Alignment" />
|
|
</div>
|
|
</div>
|
|
<div class="mode2" style="margin-left: 2px;border-right: 0px">
|
|
<div class="tool">
|
|
<img src="public/images/left24.png" id="left_alignment" language="t" zh="左对齐" ozh="左對齊"
|
|
en="Left Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/right24.png" id="right_alignment" language="t" zh="右对齐" ozh="右對齊"
|
|
en="Right Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/center_x24.png" id="center_x_alignment" language="t" zh="居中对齐"
|
|
ozh="居中對齊" en="Center Alignment" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="object_attribute">
|
|
<div class="component-title" zh="对象属性" ozh="對象屬性" en="Object Properties" language="m"></div>
|
|
<div>
|
|
<div class="component-line">
|
|
<span class="name" zh="类型：" ozh="類型：" en="Type:" language="m"></span>
|
|
<span id="component_type" zh="背景" ozh="背景" en="Background" language="m"></span>
|
|
</div>
|
|
<div id="base_control">
|
|
<div class="component-line">
|
|
<div class="ui-button" id="up_obj" language="m" zh="移至上层" ozh="移至上層" en="upper layer">
|
|
</div>
|
|
<div class="ui-button" id="down_obj" language="m" zh="移至下层" ozh="移至下層" en="upper layer">
|
|
</div>
|
|
<div class="pic_bg" id="set_bg" language="m" zh="设为背景" ozh="設爲背景" en="Set as background">
|
|
</div>
|
|
<!-- <div class="pic_bg" id="vertical_obj" language="m" zh="垂直旋转" ozh="垂直旋轉" en="vertical rotation">
|
|
</div>
|
|
<div class="pic_bg" id="align_obj" language="m" zh="水平旋转" ozh="水平旋轉" en="vertical rotation">
|
|
</div> -->
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name">X:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_x" />
|
|
|
|
<span class="name">Y:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_y" />
|
|
<div style="height: 20px;width: 20px;display: inline-block;" class="ui-radio" id="lock">
|
|
<img src="public/images/unlock20.png" id="lock_img">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name">H:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_h" />
|
|
<span class="name">W:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_w" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="角度：" ozh="角度：" en="Angle"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_r" />
|
|
<img src="public/images/rotate20.png" language="t" zh="旋转90°" ozh="旋轉90°"
|
|
en="Rotate 90°" id="rotate" />
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="text_black" id="text_black" class="radio">
|
|
</div> -->
|
|
</div>
|
|
<div id="pic_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="pic_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="pic_black" id="pic_black" class="radio">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div id="out_pic_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="out_pic_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="out_pic_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="out_pic_black" id="out_pic_black" class="radio">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div id="text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" style="position: relative;top:-45px" language="m" zh="文本：" ozh="文本："
|
|
en="Text:">文本:</span>
|
|
<textarea rows="3" style="height: 60px" id="text_text"></textarea>
|
|
</div>
|
|
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Fonts:"></span>
|
|
<select class="ui-select" id="text_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="text_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="text_color" class="input_color">
|
|
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_underline">
|
|
<img src="public/images/underline24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_linethrough">
|
|
<img src="public/images/linethrough24.png">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="text_back_color" class="input_color">
|
|
<div class="transparent-button" id="text_back_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
</div>
|
|
<div id="circle_text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" style="position: relative;top:-45px" language="m" zh="圆形文本：" ozh="圆形文本："
|
|
en="Circle Text:">圆形文本:</span>
|
|
<textarea rows="3" style="height: 60px" id="circle_text_text"></textarea>
|
|
</div>
|
|
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Fonts:"></span>
|
|
<select class="ui-select" id="circle_text_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<div id="circle_text_size"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="直径：" ozh="直径：" en="Diameter:"></span>
|
|
<div id="circle_text_diameter"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div> -->
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="circle_text_color" class="input_color">
|
|
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="circle_text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="circle_text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="circle_text_back_color" class="input_color">
|
|
<div class="transparent-button" id="circle_text_back_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div> -->
|
|
</div>
|
|
<div id="out_text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="out_text_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="out_text_text" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="out_text_font_family">
|
|
</select>
|
|
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="out_text_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="out_text_color" class="input_color">
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_underline">
|
|
<img src="public/images/underline24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_linethrough">
|
|
<img src="public/images/linethrough24.png">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="out_text_back_color" class="input_color">
|
|
<div class="transparent-button" id="out_text_back_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="如果文本被截断，则作业失败" ozh="如果文本被截斷，則作業失敗"
|
|
en="If the text is truncated, the operation fails"></span>
|
|
<input type="checkbox" name="exceed" id="exceed" class="radio">
|
|
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="自动换行：" ozh="自動換行：" en="Automatic line feed:"></span>
|
|
<input type="checkbox" name="autoWrap" id="autoWrap" class="radio">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="固定大小：" ozh="固定大小：" en="Fixed Size:"></span>
|
|
<input type="checkbox" name="fixSize" id="fixSize" class="radio">
|
|
</div>
|
|
</div>
|
|
<div id="rect_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="填充：" ozh="填充：" en="Fill:"></span>
|
|
<input type="color" id="rect_color" class="input_color">
|
|
<div class="transparent-button" id="rect_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="边框：" ozh="邊框：" en="Border:"></span>
|
|
<input type="color" id="rect_stroke" class="input_color">
|
|
<div class="transparent-button" id="rect_stroke_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="粗细：" ozh="粗細：" en="Thickness:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px"
|
|
id="rect_stroke_width" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="圆角：" ozh="圓角：" en="Radius:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px" id="rect_radius" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="rect_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="line_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="line_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="虚线间距：" ozh="虛線間距：" en="Spacing:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="line_dist" />
|
|
</div>
|
|
</div>
|
|
<div id="circle_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="填充：" ozh="填充：" en="Fill:"></span>
|
|
<input type="color" id="circle_color" class="input_color">
|
|
<div class="transparent-button" id="circle_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="边框：" ozh="邊框：" en="Border:"></span>
|
|
<input type="color" id="circle_stroke" class="input_color">
|
|
<div class="transparent-button" id="circle_stroke_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="粗细：" ozh="粗細：" en="Thickness:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px"
|
|
id="circle_stroke_width" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="circle_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="qrcode_Controll" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="qrcode_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="qrcode_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="qrcode_val" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
</div>
|
|
<div id="barcode_controll" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="barcode_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="barcode_val" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="取消文字：" ozh="取消文字：" en="Cancel text:"></span>
|
|
<input type="checkbox" name="barcode_show" id="barcode_show" class="radio">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="barcode_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="barcode_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="barcode_color" class="input_color">
|
|
</div>
|
|
</div>
|
|
<div id="counter_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="count_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="count_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="counter_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="起始：" ozh="起始：" en="Start:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="counter_start" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="增量：" ozh="增量：" en="Incremental:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="counter_add" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="obj_list">
|
|
<div class="component-title" language="m" zh="对象列表" ozh="對象列錶" en="Object List"></div>
|
|
<div class="obj_list">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-left" style="height: 100%">
|
|
<div class="tools-bar left-bar">
|
|
<div class="mode-left">
|
|
<div class="mode-warp">
|
|
<div class="img-warp" id="new">
|
|
<img src="public/images/newfile24.png" language="t" zh="新建模板" ozh="新建模闆"
|
|
en="New template" />
|
|
</div>
|
|
<div class="img-warp" id="open">
|
|
<img src="public/images/open24.png" language="t" zh="打开模板" ozh="打開模闆"
|
|
en="Open Template" />
|
|
</div>
|
|
<div class="img-warp" id="save">
|
|
<img src="public/images/save24.png" language="t" zh="保存模板" ozh="保存模闆"
|
|
en="Save Template" />
|
|
</div>
|
|
<div class="img-warp" id="output">
|
|
<img src="public/images/output24.png" language="t" zh="另存为" ozh="另存為" en="Save as" />
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="img-warp">
|
|
<img src="public/images/previous24.png" id="previous" language="t" zh="撤销" ozh="撤銷"
|
|
en="Revocation" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/next24.png" id="next" language="t" zh="恢复" ozh="恢復"
|
|
en="Recovery" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/clean24.png" id="clean" language="t" zh="清空" ozh="清空"
|
|
en="Clear" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/delete24.png" id="delete" language="t" zh="删除" ozh="刪除"
|
|
en="Delete" />
|
|
</div>
|
|
|
|
<div class="ui-button ui-button-active img-warp img-warp1" id="front_side">
|
|
<span language="m" zh="正面" ozh="正面" en="Front"></span>
|
|
</div>
|
|
<div class="ui-button img-warp img-warp1" id="back_side">
|
|
<span language="m" zh="背面" ozh="背面" en="Back"></span>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<div class="ui-button img-warp" id="version_change">
|
|
<span language="m" zh="切换" ozh="切换" en="Change"></span>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="img-warp">
|
|
<img src="public/images/about24.png" id="about" language="t" zh="关于我们" ozh="關於我們"
|
|
en="About Us" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/help24.png" id="help" language="t" zh="帮助文档" ozh="幫助文檔"
|
|
en="Help" />
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<!-- <select class="ui-select" id="language_select" style="margin-left: 10px">
|
|
<option value='zh'>中文-简体</option>
|
|
<option value='ozh'>中文-繁體</option>
|
|
<option value='en'>English</option>
|
|
</select> -->
|
|
</div>
|
|
</div>
|
|
<div class="mode3">
|
|
<button type="button" class="layui-btn layui-btn-primary white" id="display" language="m"
|
|
zh="预览效果" ozh="預覽效果" en="Display"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="tool" language="t" zh="图片" ozh="圖片" en="Picture">
|
|
<img src="public/images/images.svg" id="addPic" />
|
|
</div>
|
|
<div class="tool" language="t" zh="合成图片" ozh="合成圖片" en="Synthetic Picture">
|
|
<img src="public/images/images_add.svg" id="addOutPic" />
|
|
</div>
|
|
<div class="tool" language="t" zh="文本" ozh="文本" en="Text">
|
|
<img src="public/images/text.svg" id="addText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="圆形文本" ozh="圆形文本" en="Circle Text">
|
|
<img src="public/images/text3.svg" id="addCircleText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="合成文本" ozh="合成文本" en="Synthetic Text">
|
|
<img src="public/images/text2.svg" id="addOutText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="方块" ozh="方塊" en="Rect">
|
|
<img src="public/images/rect.svg" id="addRect" />
|
|
</div>
|
|
<div class="tool" language="t" zh="圆形" ozh="圓形" en="Circle">
|
|
<img src="public/images/round.svg" id="addCircle" />
|
|
</div>
|
|
<div class="tool" language="t" zh="直线" ozh="直線" en="Line">
|
|
<img src="public/images/line.svg" id="addLine" />
|
|
</div>
|
|
<div class="tool" language="t" zh="二维码" ozh="二維碼" en="QR Code">
|
|
<img src="public/images/qrcode.svg" id="addQrCode" />
|
|
</div>
|
|
<div class="tool" language="t" zh="条形码" ozh="條形碼" en="Bar Code">
|
|
<img src="public/images/barcode.svg" id="addBarCode" />
|
|
</div>
|
|
<div class="tool" language="t" zh="计数器" ozh="計數器" en="Counter">
|
|
<img src="public/images/counter.svg" id="addCounter" />
|
|
</div>
|
|
</div>
|
|
<div class="right" style="background-color: #1E252D">
|
|
<div style="background-color: #1E252D;" id="canvas-div">
|
|
<div class="canvas_box">
|
|
<canvas id="canvas1"></canvas>
|
|
<canvas id="canvas2"></canvas>
|
|
</div>
|
|
<div class="canvas_bg">
|
|
<!-- 类型改变 -->
|
|
<img id="canvas_bg_img" class="canvas_bg_img" src="./public/images/bg_1.png" />
|
|
</div>
|
|
</div>
|
|
<div class="footer" style="background-color: #31373D">
|
|
<div id="posText" style="display: inline-block">X : Y : </div>
|
|
<div id="zoomSlide" style="width: 300px;display: none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas style="display: none" id="barcode"></canvas>
|
|
<!-- 类型改变 -->
|
|
<img id="source_front" src="./public/images/front_bg1_1.png" style="display: none" />
|
|
<img id="source_front2" src="./public/images/front_bg2_1.png" style="display: none" />
|
|
<img id="source_back" src="./public/images/back_bg_1.png" style="display: none" />
|
|
</div>
|
|
</div>
|
|
<script src="./public/js/fabric.min.js"></script>
|
|
<script src="./public/js/guideLines.js"></script>
|
|
<script src="./public/js/print.min.js"></script>
|
|
<script src="./public/js/crypto-js.min.js"></script>
|
|
<script src="./public/js/jspdf.umd.min.js"></script>
|
|
<script src="./layui/layui.js"></script>
|
|
<script>
|
|
function desEncrypt(str, key = "df6a551ca43181fc485f3043bcdd2fbc") {
|
|
var APIFMS;
|
|
try {
|
|
var keyHex_encrypt = CryptoJS.enc.Utf8.parse(key);
|
|
var encrypted = CryptoJS.DES.encrypt(str, keyHex_encrypt, {
|
|
mode: CryptoJS.mode.ECB,
|
|
padding: CryptoJS.pad.Pkcs7
|
|
});
|
|
APIFMS = CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
|
|
} catch (err) {
|
|
console.log('des 加密 -------------------------');
|
|
console.log(err);
|
|
}
|
|
return APIFMS;
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
(function (fabric) {
|
|
fabric.CurvedText = fabric.util.createClass(fabric.Object, {
|
|
type: 'curved-text',
|
|
diameter: 250,
|
|
kerning: 0,
|
|
text: '',
|
|
flipped: false,
|
|
fill: '#000',
|
|
fontFamily: 'Times New Roman',
|
|
fontSize: 24, // in px
|
|
fontWeight: 'normal',
|
|
fontStyle: '', // "normal", "italic" or "oblique".
|
|
cacheProperties: fabric.Object.prototype.cacheProperties.concat('diameter', 'textBackgroundColor', 'kerning', 'flipped', 'fill', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'strokeStyle', 'strokeWidth'),
|
|
strokeStyle: null,
|
|
strokeWidth: 0,
|
|
initialize: function (text, options) {
|
|
options || (options = {});
|
|
if (typeof text === 'object' && text) {
|
|
for (let key in text) {
|
|
this[key] = text[key]
|
|
}
|
|
} else {
|
|
this.text = text;
|
|
}
|
|
this.callSuper('initialize', options);
|
|
this.set('lockUniScaling', true);
|
|
var canvas = this.getCircularText();
|
|
this.cropCanvas(canvas);
|
|
this.set('width', canvas.width);
|
|
this.set('height', canvas.height);
|
|
},
|
|
_getFontDeclaration: function () {
|
|
return [
|
|
(fabric.isLikelyNode ? this.fontWeight : this.fontStyle),
|
|
(fabric.isLikelyNode ? this.fontStyle : this.fontWeight),
|
|
this.fontSize + 'px',
|
|
(fabric.isLikelyNode ? ('"' + this.fontFamily + '"') : this.fontFamily)
|
|
].join(' ');
|
|
},
|
|
cropCanvas: function (canvas) {
|
|
var ctx = canvas.getContext('2d'),
|
|
w = canvas.width,
|
|
h = canvas.height,
|
|
pix = { x: [], y: [] }, n,
|
|
imageData = ctx.getImageData(0, 0, w, h),
|
|
fn = function (a, b) { return a - b };
|
|
for (var y = 0; y < h; y++) {
|
|
for (var x = 0; x < w; x++) {
|
|
if (imageData.data[((y * w + x) * 4) + 3] > 0) {
|
|
pix.x.push(x);
|
|
pix.y.push(y);
|
|
}
|
|
}
|
|
}
|
|
pix.x.sort(fn);
|
|
pix.y.sort(fn);
|
|
n = pix.x.length - 1;
|
|
w = pix.x[n] - pix.x[0];
|
|
h = pix.y[n] - pix.y[0];
|
|
var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
|
|
canvas.width = w;
|
|
canvas.height = h;
|
|
ctx.putImageData(cut, 0, 0);
|
|
},
|
|
getCircularText: function () {
|
|
var text = this.text,
|
|
diameter = this.diameter,
|
|
flipped = this.flipped,
|
|
kerning = this.kerning,
|
|
fill = this.fill,
|
|
inwardFacing = true,
|
|
startAngle = 0,
|
|
canvas = fabric.util.createCanvasElement(),
|
|
ctx = canvas.getContext('2d'),
|
|
cw, // character-width
|
|
x, // iterator
|
|
clockwise = -1; // draw clockwise for aligned right. Else Anticlockwise
|
|
if (flipped) {
|
|
// startAngle = 180;
|
|
inwardFacing = false;
|
|
}
|
|
startAngle *= Math.PI / 180; // convert to radians
|
|
var d = document.createElement('div');
|
|
d.style.fontFamily = this.fontFamily;
|
|
d.style.fontSize = this.fontSize + 'px';
|
|
d.style.fontWeight = this.fontWeight;
|
|
d.style.fontStyle = this.fontStyle;
|
|
d.textContent = text;
|
|
document.body.appendChild(d);
|
|
var textHeight = d.offsetHeight;
|
|
document.body.removeChild(d);
|
|
canvas.width = canvas.height = diameter;
|
|
ctx.font = this._getFontDeclaration();
|
|
if (inwardFacing) { text = text.split('').reverse().join('') };
|
|
ctx.translate(diameter / 2, diameter / 2); // Move to center
|
|
startAngle += (Math.PI * !inwardFacing); // Rotate 180 if outward
|
|
ctx.textBaseline = 'middle'; // Ensure we draw in exact center
|
|
ctx.textAlign = 'center'; // Ensure we draw in exact center
|
|
for (x = 0; x < text.length; x++) {
|
|
cw = ctx.measureText(text[x]).width;
|
|
startAngle += ((cw + (x == text.length - 1 ? 0 : kerning)) / (diameter / 2 - textHeight)) / 2 * -clockwise;
|
|
}
|
|
ctx.rotate(startAngle);
|
|
for (x = 0; x < text.length; x++) {
|
|
cw = ctx.measureText(text[x]).width; // half letter
|
|
ctx.rotate((cw / 2) / (diameter / 2 - textHeight) * clockwise);
|
|
if (this.strokeStyle && this.strokeWidth) {
|
|
ctx.strokeStyle = this.strokeStyle;
|
|
ctx.lineWidth = this.strokeWidth;
|
|
ctx.miterLimit = 2;
|
|
ctx.strokeText(text[x], 0, (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2));
|
|
}
|
|
ctx.fillStyle = fill;
|
|
ctx.fillText(text[x], 0, (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2));
|
|
ctx.rotate((cw / 2 + kerning) / (diameter / 2 - textHeight) * clockwise); // rotate half letter
|
|
}
|
|
return canvas;
|
|
},
|
|
_set: function (key, value) {
|
|
switch (key) {
|
|
case 'scaleX':
|
|
this.fontSize *= value;
|
|
this.diameter *= value;
|
|
this.width *= value;
|
|
this.scaleX = 1;
|
|
if (this.width < 1) { this.width = 1; }
|
|
break;
|
|
case 'scaleY':
|
|
this.height *= value;
|
|
this.scaleY = 1;
|
|
if (this.height < 1) { this.height = 1; }
|
|
break;
|
|
default:
|
|
this.callSuper('_set', key, value);
|
|
break;
|
|
}
|
|
},
|
|
_render: function (ctx) {
|
|
var canvas = this.getCircularText();
|
|
this.cropCanvas(canvas);
|
|
this.set('width', canvas.width);
|
|
this.set('height', canvas.height);
|
|
ctx.drawImage(canvas, -this.width / 2, -this.height / 2, this.width, this.height);
|
|
this.setCoords();
|
|
},
|
|
toObject: function (propertiesToInclude) {
|
|
return this.callSuper('toObject', ['text', 'diameter', 'textBackgroundColor', 'kerning', 'flipped', 'fill', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'strokeStyle', 'strokeWidth'].concat(propertiesToInclude));
|
|
}
|
|
});
|
|
fabric.CurvedText.fromObject = function (object, callback, forceAsync) {
|
|
return fabric.Object._fromObject('CurvedText', object, callback, forceAsync, 'curved-text');
|
|
};
|
|
})(typeof fabric !== 'undefined' ? fabric : require('fabric').fabric);
|
|
|
|
const remote = require('@electron/remote')
|
|
var path = require('path');
|
|
const exePath = !remote.app.isPackaged ? process.cwd() : path.dirname(process.execPath)
|
|
const { ipcRenderer } = require('electron')
|
|
const { dialog } = require('@electron/remote')
|
|
var jrQrcode = require('jr-qrcode');
|
|
var JsBarcode = require('jsbarcode');
|
|
ipcRenderer.send('get-sys-fonts');
|
|
ipcRenderer.send('get-scale-rate');
|
|
const { clipboard } = require('electron')
|
|
const dpi = 600
|
|
//var encrypt = new JSEncrypt();
|
|
//encrypt.setPublicKey(`-----BEGIN PUBLIC KEY-----
|
|
//MIGdMA0GCSqGSIb3DQEBAQUAA4GLADCBhwKBgQDAbKQ46WevL9PapJ+AlZqSzczkTovu7STH
|
|
//FmZmIJcNrwPPEWRR2PliUvtS28V+gNMWlu3wNWFAS5KGDbTtndIrP3hnlp9BDIcAcdNuJUM7
|
|
//yJfAYBhtkqvj45Orvdd2RYRxhkQb34uTNXpM+biMH6Wd0wykNb9/VBNM0C12KswEdwIBEQ==
|
|
//-----END PUBLIC KEY-----`);
|
|
layui.use(['layer', 'slider', 'form', 'colorpicker'], function () {
|
|
let myDate = new Date();
|
|
let s_lan = "";
|
|
ipcRenderer.send('get-sys-language');
|
|
/* if(myDate.getFullYear()>2021 && myDate.getMonth() >= 1 && myDate.getDate() > 15){
|
|
|
|
}*/
|
|
function GetFile() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
return params
|
|
}
|
|
function langua_ge(lan = 'zh') {
|
|
$("[language='m']").each(function (i) {
|
|
$(this).html($(this).attr(lan));
|
|
})
|
|
|
|
$("[language='t']").each(function (i) {
|
|
$(this).attr("title", $(this).attr(lan));
|
|
})
|
|
}
|
|
function language_str(str) {
|
|
let t = {
|
|
"whetherSave": { zh: "是否保存当前文件？", ozh: "是否保存當前文件？", en: "Do you want to save the current file?" },
|
|
"save": { zh: "保存", ozh: "保存", en: "Save" },
|
|
"noSave": { zh: "不保存", ozh: "不保存", en: "No saving" },
|
|
"cancel": { zh: "取消", ozh: "取消", en: "Cancel" },
|
|
"saveSucc": { zh: "保存成功至", ozh: "保存成功至", en: "Save successfully to" },
|
|
"saveFile": { zh: "保存文件", ozh: "保存文件", en: "Save file" },
|
|
"display": { zh: "预览", ozh: "預覽", en: "Display" },
|
|
"output": { zh: "导出", ozh: "導出", en: "Export" },
|
|
"bg": { zh: "背景", ozh: "背景", en: "Background" },
|
|
"selectPic": { zh: "请选择图片", ozh: "請選擇圖片", en: "Please select a picture" },
|
|
"selectPic": { zh: "请选择文件", ozh: "請選擇文件", en: "Please select a file" },
|
|
"img": { zh: "圖片", ozh: "圖片", en: "Image" },
|
|
"simg": { zh: "合成圖片", ozh: "合成圖片", en: "Synthesized Image" },
|
|
"text": { zh: "文本", ozh: "文本", en: "Text" },
|
|
"ctext": { zh: "圆形文本", ozh: "圆形文本", en: "Circle Text" },
|
|
"stext": { zh: "合成文本", ozh: "合成文本", en: "Synthesized Text" },
|
|
"rect": { zh: "矩形", ozh: "矩形", en: "Rectangle" },
|
|
"circ": { zh: "圓形", ozh: "圓形", en: "Circle" },
|
|
"line": { zh: "直線", ozh: "直線", en: "Line" },
|
|
"qrc": { zh: "二維碼", ozh: "二維碼", en: "QR code" },
|
|
"barc": { zh: "條形碼", ozh: "條形碼", en: "Barcode" },
|
|
"counter": { zh: "計數器", ozh: "计数器", en: "Counter" },
|
|
"about": { zh: "关于Soon Design", ozh: "關於Soon Design", en: "About Soon Design" },
|
|
"vers": { zh: "版本", ozh: "版本", en: "Version" },
|
|
"comf": { zh: "确认", ozh: "確認", en: "Select" },
|
|
"copyright": { zh: "(c) 2022 上海卡树信息科技有限公司 保留所有权利", ozh: "(c) 2022 上海卡樹信息科技有限公司 保留所有權利", en: "Shanghai Cardsoon Information Technology Co., Ltd.", }
|
|
}
|
|
return t[str][s_lan];
|
|
}
|
|
|
|
var $ = layui.$;
|
|
var layer = layui.layer
|
|
, slider = layui.slider, colorpicker = layui.colorpicker;
|
|
let addState = 0;//0是不添加
|
|
let background_image, background_image1, background_image2;
|
|
let bg_version = 1;//front_bg1.png front_bg2.png
|
|
var zoom = 1;
|
|
$(function () {
|
|
// 定义CurvedText类
|
|
|
|
|
|
$("#object_attribute").css("height", "470px");
|
|
$("#obj_list").css("height", document.body.clientHeight - 520);
|
|
$(".obj_list").css("height", $("#obj_list").height() - 32);
|
|
|
|
$(".main").show();
|
|
$(".canvas_box").css("height", document.body.clientHeight - 100);
|
|
zoom = $(".canvas_bg_img").width() / 2787
|
|
$("#canvas1").attr("width", $(".canvas_box").width() / zoom);
|
|
$("#canvas1").attr("height", $(".canvas_box").height() / zoom);
|
|
$("#canvas2").attr("width", $(".canvas_box").width() / zoom);
|
|
$("#canvas2").attr("height", $(".canvas_box").height() / zoom);
|
|
var openAs = {
|
|
_name: "",
|
|
set name(val) {
|
|
if (val == "") {
|
|
$("title").html('Soon Design');
|
|
} else {
|
|
$("title").html('Soon Design - ' + val);
|
|
}
|
|
this._name = val;
|
|
},
|
|
get name() {
|
|
return this._name
|
|
},
|
|
};//被打开的文件名
|
|
let objs1 = [];
|
|
let objs2 = [];
|
|
let step1 = { val: 0 }, step2 = { val: 0 };
|
|
let step = step1;
|
|
let objs = objs1;
|
|
let recordJson1 = [], recordJson2 = [], recordJson = recordJson1, recordObjs1 = [], recordObjs2 = [], recordObjs = recordObjs1;
|
|
let pre_objs1 = [], pre_objs2 = [], next_objs1 = [], next_objs2 = [], pre_objs = pre_objs1, next_objs = next_objs1;
|
|
let pre_json1 = [], pre_json2 = [], next_json1 = [], next_json2 = [], pre_json = pre_json1, next_json = next_json1;
|
|
var canvas1 = new fabric.Canvas('canvas1');
|
|
var canvas2 = new fabric.Canvas('canvas2');
|
|
fabric.Object.prototype.objectCaching = false;
|
|
var ctx1 = canvas1.getSelectionContext();
|
|
var ctx2 = canvas2.getSelectionContext();
|
|
let is_bgi_add = false;
|
|
canvas1.zoomToPoint(new fabric.Point(0, 0), 1);
|
|
canvas2.zoomToPoint(new fabric.Point(0, 0), 1);
|
|
$("#source_front").width(zoom * $("#source_front").width());
|
|
$("#source_back").width(zoom * $("#source_back").width());
|
|
$(".canvas-container:eq(0)").css('transform', 'scale(' + zoom + ')')
|
|
$(".canvas-container:eq(1)").css('transform', 'scale(' + zoom + ')')
|
|
$(".canvas-container:eq(0)").css('width', 0)
|
|
|
|
$(".canvas-container:eq(1)").hide();
|
|
var canvas = canvas1;
|
|
fabric.Object.prototype.set({
|
|
borderColor: "#9013FE",
|
|
cornerColor: "#9013FE", //激活状态角落图标的填充颜色
|
|
cornerStrokeColor: "#9013FE", //激活状态角落图标的边框颜色
|
|
borderOpacityWhenMoving: 1,
|
|
borderScaleFactor: 6,
|
|
cornerSize: 24,
|
|
cornerStyle: "circle", //rect,circle
|
|
centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
|
|
centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
|
|
transparentCorners: false, //激活状态角落的图标是否透明
|
|
rotatingPointOffset: 20, //旋转距旋转体的距离
|
|
padding: 0,
|
|
});
|
|
canvas1.preserveObjectStacking = true;
|
|
canvas2.preserveObjectStacking = true;
|
|
|
|
|
|
var front_list = [];
|
|
ipcRenderer.on('font-list', (event, data) => {
|
|
const newFontList = [];
|
|
data.map(item => {
|
|
if (item.indexOf('"') === 0) {
|
|
newFontList.push(item.replace(/^"|"$/g, ''));
|
|
} else {
|
|
newFontList.push(item);
|
|
}
|
|
})
|
|
front_list = newFontList;
|
|
for (let item of front_list) {
|
|
$("#text_font_family").append("<option value='" + item + "'>" + item + "</option>");
|
|
$("#circle_text_font_family").append("<option value='" + item + "'>" + item + "</option>");
|
|
$("#out_text_font_family").append("<option value='" + item + "'>" + item + "</option>");
|
|
$("#barcode_font_family").append("<option value='" + item + "'>" + item + "</option>");
|
|
$("#count_font_family").append("<option value='" + item + "'>" + item + "</option>");
|
|
}
|
|
});
|
|
ipcRenderer.on('sys-lan', (event, data) => {
|
|
let lang = localStorage.getItem("lang");
|
|
if (lang) {
|
|
s_lan = lang;
|
|
langua_ge(lang);
|
|
$("#language_select").val(lang);
|
|
return;
|
|
}
|
|
switch (data) {
|
|
case 'zh-CN':
|
|
s_lan = "zh";
|
|
langua_ge("zh");
|
|
$("#language_select").val("zh");
|
|
localStorage.setItem("lang", "zh");
|
|
break;
|
|
case 'zh':
|
|
s_lan = "zh";
|
|
langua_ge("zh");
|
|
$("#language_select").val("zh");
|
|
localStorage.setItem("lang", "zh");
|
|
break;
|
|
case 'zh-TW':
|
|
s_lan = "ozh";
|
|
langua_ge("ozh");
|
|
$("#language_select").val("ozh");
|
|
localStorage.setItem("lang", "ozh");
|
|
break;
|
|
case 'en':
|
|
s_lan = "en";
|
|
langua_ge("en");
|
|
$("#language_select").val("en");
|
|
localStorage.setItem("lang", "en");
|
|
break;
|
|
case 'en-AU':
|
|
s_lan = "en";
|
|
langua_ge("en");
|
|
$("#language_select").val("en");
|
|
localStorage.setItem("lang", "en");
|
|
break;
|
|
case 'en-CA':
|
|
s_lan = "en";
|
|
langua_ge("en");
|
|
$("#language_select").val("en");
|
|
localStorage.setItem("lang", "en");
|
|
break;
|
|
case 'en-GB':
|
|
s_lan = "en";
|
|
langua_ge("en");
|
|
$("#language_select").val("en");
|
|
localStorage.setItem("lang", "en");
|
|
break;
|
|
case 'en-NZ':
|
|
s_lan = "en";
|
|
langua_ge("en");
|
|
$("#language_select").val("en");
|
|
localStorage.setItem("lang", "en");
|
|
break;
|
|
case 'en-US':
|
|
s_lan = "en";
|
|
langua_ge("en");
|
|
$("#language_select").val("en");
|
|
localStorage.setItem("lang", "en");
|
|
break;
|
|
case 'en-ZA':
|
|
s_lan = "en";
|
|
langua_ge("en");
|
|
$("#language_select").val("en");
|
|
localStorage.setItem("lang", "en");
|
|
break;
|
|
}
|
|
});
|
|
ipcRenderer.on('close', (event, message) => {
|
|
layer.confirm('<font style="color:black">' + language_str("whetherSave") + '</font>', {//是否保存当前文件？
|
|
btn: [language_str("save"), language_str("noSave"), language_str("cancel")] //['保存', '不保存', '取消']
|
|
, btn3: function (index, layero) {
|
|
|
|
}
|
|
}, function (index, layero) {
|
|
|
|
output(() => ipcRenderer.send('run-close'));
|
|
return;
|
|
let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let _g1 = [], _g2 = [];
|
|
let left = 0, top = 0;
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o));
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
left = 0, top = 0;
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o));
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
|
|
if (openAs.name != "") {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
o.soonType = 1
|
|
fs.writeFileSync(openAs.name, JSON.stringify(o))
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
|
|
ipcRenderer.send('run-close');
|
|
return;
|
|
}
|
|
dialog.showSaveDialog({
|
|
title: language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.filePath == "") { ipcRenderer.send('run-close'); return; }
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon';
|
|
}
|
|
let fs = require('fs')
|
|
o.soonType = 1
|
|
fs.writeFileSync(result.filePath, JSON.stringify(o))
|
|
openAs.name = result.filePath;
|
|
layer.msg(language_str("saveSucc") + openAs.name);//保存成功至
|
|
saveHistory();
|
|
ipcRenderer.send('run-close');
|
|
}).catch(err => {
|
|
console.log()
|
|
})
|
|
layer.close(index);
|
|
}, function (index) {
|
|
ipcRenderer.send('run-close');
|
|
});
|
|
|
|
})
|
|
addBackground();//添加背景 白色卡片
|
|
|
|
initAligningGuidelines(canvas1);
|
|
initAligningGuidelines(canvas2);
|
|
//canvas.setZoom(0.5)
|
|
//recordObjs1.push(JSON.stringify(objs1));
|
|
//recordJson1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
//recordObjs2.push(JSON.stringify(objs2));
|
|
//recordJson2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
canvas.renderAll();//重新渲染画布
|
|
var zoomSlider = slider.render({
|
|
elem: '#zoomSlide', //绑定元素
|
|
min: 25,
|
|
max: 500,
|
|
value: 100,
|
|
change(val) {
|
|
console.log(val, zoomSlider)
|
|
canvas.zoomToPoint(
|
|
new fabric.Point(0, 0),
|
|
val / 100
|
|
);
|
|
// zoom = val / 100;
|
|
//$(".canvas-container").css("transform","scale(" + val / 100 + ")")
|
|
}
|
|
|
|
});
|
|
window.rotate = function (id) {
|
|
let angle = $(`#${id}`).attr("angle") - 0;
|
|
angle += 90;
|
|
$(`#${id}`).css("transform", `rotate(${angle}deg)`);
|
|
$(`#${id}`).attr("angle", angle);
|
|
}
|
|
$('#display').on('click', function () {
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/front_bg' + bg_version + '_1.png', function (i1) {
|
|
i1.left = background_image.left;
|
|
i1.top = background_image.top;
|
|
let img1 = i1;
|
|
|
|
fabric.Image.fromURL('./public/images/back_bg_1.png', function (i2) {
|
|
i2.left = background_image.left;
|
|
i2.top = background_image.top;
|
|
let img2 = i2;
|
|
fabric.Image.fromURL('./public/images/op_1.png', function (i3) {
|
|
i2.left = background_image.left;
|
|
i2.top = background_image.top;
|
|
let img3 = i3;
|
|
display_func(img1, img2, img3);
|
|
})
|
|
})
|
|
})
|
|
});
|
|
// 导出文件
|
|
async function saveImageAsPNG(buffer) {
|
|
let fs = require('fs');
|
|
// 弹出保存对话框
|
|
const { canceled, filePath } = await dialog.showSaveDialog({
|
|
title: '保存图片',
|
|
defaultPath: path.join(exePath, 'output.png'), // 默认路径
|
|
filters: [{ name: 'PNG Images', extensions: ['png'] }] // 文件过滤器
|
|
});
|
|
|
|
if (canceled) {
|
|
console.log('用户取消了保存操作');
|
|
return;
|
|
}
|
|
|
|
// 将Buffer写入PNG文件到用户选择的路径
|
|
fs.writeFile(filePath, buffer, (err) => {
|
|
if (err) {
|
|
console.error('写入文件失败:', err);
|
|
} else {
|
|
layer.msg(language_str("saveSucc") + filePath);//'保存成功至'
|
|
console.log('PNG文件已保存至:', filePath);
|
|
}
|
|
});
|
|
}
|
|
function display_func(img1, img2, img3) {
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#component_type").text(language_str("bg"));//"背景"
|
|
canvas1.discardActiveObject().renderAll();
|
|
canvas2.discardActiveObject().renderAll();
|
|
let _objs1 = canvas1.getObjects();
|
|
let g1 = [];
|
|
let g3 = [];
|
|
let g5 = [];
|
|
let left = 0;//左裁剪
|
|
let top = 0;//顶裁剪
|
|
let black_left = 0;//黑色左裁剪
|
|
let black_top = 0;//黑色顶裁剪
|
|
let all_left = 0;//预览图左裁剪
|
|
let all_top = 0;//预览图顶裁剪
|
|
let list1 = [..._objs1]
|
|
for (let item of list1) {
|
|
let idx = getIndex(item, canvas1);
|
|
//console.log("------");
|
|
//console.log(item.getCoords());
|
|
//console.log(getCoordsMinX(background_image.getCoords()));
|
|
//console.log(getCoordsMinX(item.getCoords()));
|
|
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
|
|
//console.log("------");
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g3.push(fabric.util.object.clone(item));
|
|
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
|
|
continue;//计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
|
|
continue;//二维码 条形码
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 2)) {
|
|
continue;//合成图片
|
|
}
|
|
if (idx != 0 &&
|
|
(
|
|
(
|
|
objs1[idx - 1].type == 3
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 11
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//圆形文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 5//矩形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 6//圆形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 7//直线
|
|
&&
|
|
(item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")
|
|
)
|
|
||
|
|
objs1[idx - 1].black == true //勾选并入黑色图层
|
|
// (
|
|
// objs1[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs1[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
)
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g1.push(fabric.util.object.clone(item));
|
|
continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g1.push(fabric.util.object.clone(item));
|
|
}
|
|
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g1.push(fabric.util.object.clone(item));
|
|
}
|
|
let url1 = new fabric.Group(g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
|
|
g3.push(img1);
|
|
let url3 = new fabric.Group(g3).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: all_top,
|
|
left: all_left
|
|
});
|
|
let url5 = new fabric.Group(g5).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: black_top,
|
|
left: black_left
|
|
});
|
|
let _objs2 = canvas2.getObjects();
|
|
let g2 = [];
|
|
let g4 = [];
|
|
let g6 = [];
|
|
left = 0;
|
|
top = 0;
|
|
black_top = 0;
|
|
black_left = 0;
|
|
all_top = 0;
|
|
all_left = 0;
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2);
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g4.push(fabric.util.object.clone(item));
|
|
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
|
|
continue;//黑色字或计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
|
|
continue;//二维码 条形码
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 2)) {
|
|
continue;//合成图片
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 10)) {
|
|
continue;//合成图片
|
|
}
|
|
if (idx != 0 &&
|
|
(
|
|
(
|
|
objs2[idx - 1].type == 3
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 11
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//圆形文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 5//矩形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 6//圆形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 7//直线
|
|
&&
|
|
(item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")
|
|
)
|
|
||
|
|
objs2[idx - 1].black == true //勾选并入黑色图层
|
|
// (
|
|
// objs2[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs2[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
)
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g2.push(fabric.util.object.clone(item));
|
|
continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g2.push(fabric.util.object.clone(item));
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g2.push(fabric.util.object.clone(item));
|
|
|
|
}
|
|
let url2 = new fabric.Group(g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let white_url1 = canvas1.getObjects()[0].toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
});
|
|
g4.push(img2);
|
|
let url4 = new fabric.Group(g4).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: all_top,
|
|
left: all_left
|
|
});
|
|
let url6 = new fabric.Group(g6).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: black_top,
|
|
left: black_left
|
|
});
|
|
// let white_url2 = canvas2.getObjects()[0].toDataURL({
|
|
// height: 2787,
|
|
// width: 2787,
|
|
// });
|
|
//console.log(canvas.getObjects())
|
|
let w = document.body.clientWidth * 0.7 + "px";
|
|
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + "px";
|
|
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + "px";
|
|
|
|
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
|
|
//高度超出，则按高度计算
|
|
h = document.body.clientHeight * 0.8 + "px";
|
|
h1 = document.body.clientHeight * 0.8 - 150 + "px";
|
|
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
|
|
}
|
|
// 背面
|
|
// content: `
|
|
// <div style="padding:20px;background-color:#1E252D;height:${h1};display:flex;align-items: center;overflow:hidden;">
|
|
// <div style="/*position: relative;top: 50%;transform: translateY(-50%);*/display: flex;justify-content: space-between;">
|
|
// <div class="rotate-div" id="displayImg1" angle="0">
|
|
// <img src="${url3}" style="width:95%"/>
|
|
// <div class="rotate-wrap" onclick="window.rotate('displayImg1')">
|
|
// <img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
|
|
// </div>
|
|
// </div>
|
|
// <div class="rotate-div" id="displayImg2" angle="0">
|
|
// <img style="width:95%;/*margin-left:6%*/" src="${url4}"/>
|
|
// <div class="rotate-wrap" onclick="window.rotate('displayImg2')">
|
|
// <img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>`,
|
|
|
|
let fs = require('fs');
|
|
const Buffer = require('buffer').Buffer;
|
|
const buffer = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64');
|
|
const printPath = path.join(exePath, 'print.png');
|
|
fs.writeFileSync(printPath, buffer);
|
|
|
|
layer.open({
|
|
type: 1,
|
|
area: [w, h],
|
|
title: language_str("display"), //不显示标题栏"预览"
|
|
shadeClose: true, //点击遮罩关闭
|
|
content: `
|
|
<div style="padding:20px;background-color:#1E252D;height:${h1};display:flex;align-items: center;overflow:hidden;">
|
|
<div style="display: flex;justify-content: center;height: 100%;width: 100%;">
|
|
<div class="rotate-div" id="displayImg1" angle="0">
|
|
<img src="${printPath}" style="max-width:100%;max-height:100%;"/>
|
|
<div class="rotate-wrap" onclick="window.rotate('displayImg1')">
|
|
<img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
btn: [language_str("output"), "打印"],//'导出'
|
|
btn1: function (index, layero) {
|
|
saveImageAsPNG(buffer)
|
|
// let op = { frontColorPic: "", backColorPic: "", frontBlackPic: "", backBlackPic: "", frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: '' };
|
|
// if (objs1.length != 0 & objs2.length == 0) {
|
|
// op.flag = 2;
|
|
// } else if (objs1.length == 0 & objs2.length != 0) {
|
|
// op.flag = 3;
|
|
// }
|
|
// op.frontColorPic = desEncrypt(url1);
|
|
// op.backColorPic = '';
|
|
// //op.frontBlPic = url5;
|
|
// //op.backBlPic = url6;
|
|
// op.frontBlackPic = '';
|
|
// op.backBlackPic = '';
|
|
// for (let item of _objs1) {
|
|
// let idx = getIndex(item, canvas1);
|
|
// if (idx == 0) continue;//background-image
|
|
// let type = objs1[idx - 1].type;
|
|
// if (type == 2) {
|
|
// //out_pic
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.frontData.push({
|
|
// "type": 1,
|
|
// "name": objs1[idx - 1].name,
|
|
// "FontColor": objs1[idx - 1].black ? "#000000" : "@",
|
|
// "transparency": item.get("opacity"),
|
|
// "x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 3) {
|
|
// //text
|
|
// if (item.get("fill") == "#000000") {
|
|
// //纯黑
|
|
// /*
|
|
// op.frontData.push({
|
|
// "type" : 2,
|
|
// "Text" : item.get("text"),
|
|
// "FontFamily" : item.get("fontFamily"),
|
|
// "FontSize" : parseInt(item.get("fontSize")),
|
|
// "FontColor" : "#000000",
|
|
// "FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
// "Bold" : item.get("fontWeight") == "bold",
|
|
// "Underline" : item.get("underline"),
|
|
// "Italic" : item.get("fontStyle") == "italic",
|
|
// "Strikeout" : item.get("linethrough"),
|
|
// "x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
// "y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
// "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate" : parseInt(item.get("angle").toFixed(0))
|
|
// });*/
|
|
// }
|
|
// } else if (type == 11) {
|
|
// //text
|
|
// if (item.get("fill") == "#000000") {
|
|
// //纯黑
|
|
// /*
|
|
// op.frontData.push({
|
|
// "type" : 2,
|
|
// "Text" : item.get("text"),
|
|
// "FontFamily" : item.get("fontFamily"),
|
|
// "FontSize" : parseInt(item.get("fontSize")),
|
|
// "FontColor" : "#000000",
|
|
// "FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
// "Bold" : item.get("fontWeight") == "bold",
|
|
// "Underline" : item.get("underline"),
|
|
// "Italic" : item.get("fontStyle") == "italic",
|
|
// "Strikeout" : item.get("linethrough"),
|
|
// "x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
// "y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
// "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate" : parseInt(item.get("angle").toFixed(0))
|
|
// });*/
|
|
// }
|
|
// } else if (type == 4) {
|
|
// //out_text
|
|
// let xy = getAbsoluteXY(item);
|
|
// console.log("out-text: ", item.get("text"), xy);
|
|
// console.log(background_image1.left, background_image1.top);
|
|
// op.frontData.push({
|
|
// "type": 3,
|
|
// "name": objs1[idx - 1].name,
|
|
// "FontFamily": item.get("fontFamily"),
|
|
// "DefaultText": item.get("text"),
|
|
// "FontBackgroudColor": item.get("textBackgroundColor"),
|
|
// "FontSize": parseInt(item.get("fontSize")),
|
|
// "FontColor": item.get("fill"),
|
|
// "Exceed": objs1[idx - 1].exceed,
|
|
// "AutoWrap": objs1[idx - 1].autoWrap,
|
|
// "FixSize": objs1[idx - 1].fixSize,
|
|
// "Bold": item.get("fontWeight") == "bold",
|
|
// "Underline": item.get("underline"),
|
|
// "Italic": item.get("fontStyle") == "italic",
|
|
// "Strikeout": item.get("linethrough"),
|
|
// "x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 8) {
|
|
// //二维码
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.frontData.push({
|
|
// "type": 4,
|
|
// "name": objs1[idx - 1].name,
|
|
// "FontColor": objs1[idx - 1].color,
|
|
// "DefaultText": objs1[idx - 1].val,
|
|
// "x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 9) {
|
|
// //条形码
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.frontData.push({
|
|
// "type": 5,
|
|
// "name": objs1[idx - 1].name,
|
|
// "FontSize": parseInt(objs1[idx - 1].fontSize),
|
|
// "HideText": objs1[idx - 1].show,
|
|
// "FontFamily": objs1[idx - 1].font,
|
|
// "DefaultText": objs1[idx - 1].val,
|
|
// "FontColor": objs1[idx - 1].color,
|
|
// "x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 10) {
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.frontData.push({
|
|
// "type": 6,
|
|
// "name": objs1[idx - 1].name,
|
|
// "FontFamily": item.get("fontFamily"),
|
|
// "FontSize": parseInt(item.get("fontSize")),
|
|
// "FontColor": item.get("fill"),
|
|
// "start": objs1[idx - 1].start,
|
|
// "add": parseInt(objs1[idx - 1].add),
|
|
// "x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// }
|
|
// }
|
|
// //obj2
|
|
|
|
// for (let item of _objs2) {
|
|
|
|
// let idx = getIndex(item, canvas2);
|
|
// if (idx == 0) continue;//background-image
|
|
// let type = objs2[idx - 1].type;
|
|
// if (type == 2) {
|
|
// //out_pic
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.backData.push({
|
|
// "type": 1,
|
|
// "name": objs2[idx - 1].name,
|
|
// "FontColor": objs2[idx - 1].black ? "#000000" : "@",
|
|
// "transparency": item.get("opacity"),
|
|
// "x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 3) {
|
|
// //text
|
|
// if (item.get("fill") == "#000000") {
|
|
// //纯黑
|
|
// /*
|
|
// op.backData.push({
|
|
// "type" : 2,
|
|
// "Text" : item.get("text"),
|
|
// "FontFamily" : item.get("fontFamily"),
|
|
// "FontSize" : parseInt(item.get("fontSize")),
|
|
// "FontColor" : "#000000",
|
|
// "FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
// "Bold" : item.get("fontWeight") == "bold",
|
|
// "Underline" : item.get("underline"),
|
|
// "Italic" : item.get("fontStyle") == "italic",
|
|
// "Strikeout" : item.get("linethrough"),
|
|
// "x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
// "y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
// "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate" : parseInt(item.get("angle").toFixed(0))
|
|
// });*/
|
|
// }
|
|
// } else if (type == 4) {
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.backData.push({
|
|
// "type": 3,
|
|
// "name": objs2[idx - 1].name,
|
|
// "FontFamily": item.get("fontFamily"),
|
|
// "DefaultText": item.get("text"),
|
|
// "FontSize": parseInt(item.get("fontSize")),
|
|
// "FontBackgroudColor": item.get("textBackgroundColor"),
|
|
// "FontColor": item.get("fill"),
|
|
// "Exceed": objs2[idx - 1].exceed,
|
|
// "AutoWrap": objs2[idx - 1].autoWrap,
|
|
// "FixSize": objs2[idx - 1].fixSize,
|
|
// "Bold": item.get("fontWeight") == "bold",
|
|
// "Underline": item.get("underline"),
|
|
// "Italic": item.get("fontStyle") == "italic",
|
|
// "Strikeout": item.get("linethrough"),
|
|
// "x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 8) {
|
|
// //二维码
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.backData.push({
|
|
// "type": 4,
|
|
// "name": objs2[idx - 1].name,
|
|
// "color": objs2[idx - 1].color,
|
|
// "DefaultText": objs2[idx - 1].val,
|
|
// "x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 9) {
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.backData.push({
|
|
// "type": 5,
|
|
// "name": objs2[idx - 1].name,
|
|
// "FontSize": parseInt(objs2[idx - 1].fontSize),
|
|
// "HideText": objs1[idx - 1].show,
|
|
// "FontFamily": objs2[idx - 1].font,
|
|
// "DefaultText": objs1[idx - 1].val,
|
|
// "color": objs2[idx - 1].color,
|
|
// "x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// } else if (type == 10) {
|
|
// let xy = getAbsoluteXY(item);
|
|
// op.backData.push({
|
|
// "type": 6,
|
|
// "name": objs2[idx - 1].name,
|
|
// "FontFamily": item.get("fontFamily"),
|
|
// "FontSize": parseInt(item.get("fontSize")),
|
|
// "FontColor": item.get("fill"),
|
|
// "start": parseInt(objs2[idx - 1].start),
|
|
// "add": parseInt(objs2[idx - 1].add),
|
|
// "x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
// "y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
// "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
// "w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
// "rotate": parseInt(item.get("angle").toFixed(0))
|
|
// });
|
|
// }
|
|
// }
|
|
// save(op);
|
|
/*
|
|
dialog.showSaveDialog({
|
|
title:language_str("saveFile"),
|
|
filters: [
|
|
{ name: 'CS File Type', extensions: ['cs'] },
|
|
]
|
|
}).then(result=>{
|
|
if(result.filePath.substring(result.filePath.length-5).indexOf('.') == -1){
|
|
result.filePath += '.cs';
|
|
}
|
|
let fs = require('fs')
|
|
fs.writeFileSync(result.filePath,JSON.stringify(op))
|
|
}).catch(err=>{
|
|
console.log()
|
|
})
|
|
*/
|
|
//return false 开启该代码可禁止点击该按钮关闭
|
|
},
|
|
btn2: function () {
|
|
// var pdf = jspdf.jsPDF({
|
|
// orientation: 'landscape',
|
|
// unit: 'px',
|
|
// format: [2787, 2787]
|
|
// });
|
|
|
|
// if (objs1.length != 0 & objs2.length == 0) {
|
|
// //只有正面
|
|
// let img = new Image();
|
|
// img.src = url3;
|
|
|
|
// pdf.addImage(img, 'JPEG', 0, 0, 2787, 2787);
|
|
// } else if (objs1.length == 0 & objs2.length != 0) {
|
|
// //只有背面
|
|
// let img = new Image();
|
|
// img.src = url3;
|
|
|
|
// pdf.addImage(img, 'JPEG', 0, 0, 2787, 2787);
|
|
// } else {
|
|
// let img = new Image();
|
|
// img.src = url3;
|
|
|
|
// pdf.addImage(img, 'JPEG', 0, 0, 2787, 2787);
|
|
|
|
// pdf.addPage();
|
|
// let img2 = new Image();
|
|
// img2.src = url4;
|
|
// pdf.addImage(img2, 'JPEG', 0, 0, 2787, 2787);
|
|
// }
|
|
|
|
// var pdfDataUri = pdf.output('datauristring').replace("data:application/pdf;filename=generated.pdf;base64,", "");
|
|
|
|
// 使用 printJS 打印 PDF
|
|
//ipcRenderer.send('print-pdf', pdfDataUri);
|
|
//return;
|
|
// var pdfDataUrl = pdf.output('dataurlstring').replace("data:application/pdf;filename=generated.pdf;base64,", "");
|
|
// console.log(pdfDataUrl)
|
|
// 使用printJS打印PDF
|
|
// printJS({
|
|
// printable: pdfDataUrl,
|
|
// type: 'pdf',
|
|
// base64: true
|
|
// });
|
|
printJS({ printable: printPath, type: 'image', style: 'img { width: 100%; height: auto; }' })
|
|
}
|
|
});
|
|
}
|
|
function output(callback = null, _save = save) {
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/op_1.png', function (i1) {
|
|
i1.left = background_image.left;
|
|
i1.top = background_image.top;
|
|
let img1 = i1;
|
|
fabric.Image.fromURL('./public/images/op_1.png', function (i2) {
|
|
i2.left = background_image.left;
|
|
i2.top = background_image.top;
|
|
let img2 = i2;
|
|
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#component_type").text(language_str("bg"));//"背景"
|
|
canvas1.discardActiveObject().renderAll();
|
|
canvas2.discardActiveObject().renderAll();
|
|
let _objs1 = canvas1.getObjects();
|
|
let g1 = [];
|
|
let g3 = [];
|
|
let g5 = [];//黑色图层
|
|
let left = 0;//左裁剪
|
|
let top = 0;//顶裁剪
|
|
let black_left = 0;//黑色左裁剪
|
|
let black_top = 0;//黑色顶裁剪
|
|
let all_left = 0;//预览图左裁剪
|
|
let all_top = 0;//预览图顶裁剪
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1);
|
|
//console.log("------");
|
|
//console.log(item.getCoords());
|
|
//console.log(getCoordsMinX(background_image.getCoords()));
|
|
//console.log(getCoordsMinX(item.getCoords()));
|
|
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
|
|
//console.log("------");
|
|
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g3.push(fabric.util.object.clone(item));
|
|
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
|
|
continue;//计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
|
|
continue;//二维码 条形码
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 2)) {
|
|
continue;//合成图片
|
|
}
|
|
if (idx != 0 &&
|
|
(
|
|
(
|
|
objs1[idx - 1].type == 3
|
|
&&
|
|
item.get("fill") == "#000000"
|
|
//文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 11
|
|
&&
|
|
item.get("fill") == "#000000"
|
|
//圆形文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 5//矩形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 6//圆形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 7//直线
|
|
&&
|
|
(item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")
|
|
)
|
|
||
|
|
objs1[idx - 1].black == true //勾选并入黑色图层
|
|
// ||
|
|
// (
|
|
// objs1[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs1[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
)
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g1.push(fabric.util.object.clone(item));
|
|
continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g1.push(fabric.util.object.clone(item));
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g1.push(fabric.util.object.clone(item));
|
|
}
|
|
let url1 = new fabric.Group(g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
g3.push(img1);
|
|
let url3 = new fabric.Group(g3).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: all_top,
|
|
left: all_left
|
|
});
|
|
let url5 = new fabric.Group(g5).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: black_top,
|
|
left: black_left
|
|
});
|
|
let _objs2 = canvas2.getObjects();
|
|
let g2 = [];
|
|
let g4 = [];
|
|
let g6 = [];//黑色图层
|
|
left = 0;
|
|
top = 0;
|
|
black_left = 0;//黑色左裁剪
|
|
black_top = 0;//黑色顶裁剪
|
|
all_left = 0;//黑色左裁剪
|
|
all_top = 0;//黑色顶裁剪
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2);
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g4.push(fabric.util.object.clone(item));
|
|
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
|
|
continue;//计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
|
|
continue;//二维码 条形码
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 2)) {
|
|
continue;//合成图片
|
|
}
|
|
if (idx != 0 &&
|
|
(
|
|
(
|
|
objs2[idx - 1].type == 3
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type ==11
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//圆形文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 5//矩形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 6//圆形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 7//直线
|
|
&&
|
|
(item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")
|
|
)
|
|
||
|
|
objs2[idx - 1].black == true //勾选并入黑色图层
|
|
// (
|
|
// objs2[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs2[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
)
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g2.push(fabric.util.object.clone(item));
|
|
continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g2.push(fabric.util.object.clone(item));
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g2.push(fabric.util.object.clone(item));
|
|
|
|
}
|
|
let url2 = new fabric.Group(g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let white_url1 = canvas1.getObjects()[0].toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
});
|
|
g4.push(img2);
|
|
let url4 = new fabric.Group(g4).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: all_top,
|
|
left: all_left
|
|
});
|
|
let url6 = new fabric.Group(g6).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: black_top,
|
|
left: black_left
|
|
});
|
|
// let white_url2 = canvas2.getObjects()[0].toDataURL({
|
|
// height: 2787,
|
|
// width: 2787,
|
|
// });
|
|
//console.log(canvas.getObjects())
|
|
let w = document.body.clientWidth * 0.7 + "px";
|
|
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + "px";
|
|
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + "px";
|
|
|
|
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
|
|
//高度超出，则按高度计算
|
|
h = document.body.clientHeight * 0.8 + "px";
|
|
h1 = document.body.clientHeight * 0.8 - 150 + "px";
|
|
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
|
|
}
|
|
|
|
let op = { frontColorPic: "", backColorPic: "", frontBlackPic: "", backBlackPic: "", frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: '' };
|
|
if (objs1.length != 0 & objs2.length == 0) {
|
|
op.flag = 2;
|
|
} else if (objs1.length == 0 & objs2.length != 0) {
|
|
op.flag = 3;
|
|
}
|
|
op.frontColorPic = desEncrypt(url1);
|
|
op.backColorPic = '';
|
|
//op.frontBlPic = url5;
|
|
//op.backBlPic = url6;
|
|
op.frontBlackPic = '';
|
|
op.backBlackPic = '';
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1);
|
|
if (idx == 0) continue;//background-image
|
|
let type = objs1[idx - 1].type;
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 1,
|
|
"name": objs1[idx - 1].name,
|
|
"FontColor": objs1[idx - 1].black ? "#000000" : "@",
|
|
"transparency": item.get("opacity"),
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.frontData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 11) {
|
|
//circle_text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.frontData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
//out_text
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 3,
|
|
"name": objs1[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"DefaultText": item.get("text"),
|
|
"FontBackgroudColor": item.get("textBackgroundColor"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontColor": item.get("fill"),
|
|
"Exceed": objs1[idx - 1].exceed,
|
|
"AutoWrap": objs1[idx - 1].autoWrap,
|
|
"FixSize": objs1[idx - 1].fixSize,
|
|
"Bold": item.get("fontWeight") == "bold",
|
|
"Underline": item.get("underline"),
|
|
"Italic": item.get("fontStyle") == "italic",
|
|
"Strikeout": item.get("linethrough"),
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 4,
|
|
"name": objs1[idx - 1].name,
|
|
"FontColor": objs1[idx - 1].color,
|
|
"DefaultText": objs1[idx - 1].val,
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 9) {
|
|
//条形码
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 5,
|
|
"name": objs1[idx - 1].name,
|
|
"FontSize": parseInt(objs1[idx - 1].fontSize),
|
|
"DefaultText": objs1[idx - 1].val,
|
|
"HideText": objs1[idx - 1].show,
|
|
"FontFamily": objs1[idx - 1].font,
|
|
"FontColor": objs1[idx - 1].color,
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 6,
|
|
"name": objs1[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontColor": item.get("fill"),
|
|
"start": objs1[idx - 1].start,
|
|
"add": parseInt(objs1[idx - 1].add),
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
}
|
|
//obj2
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2);
|
|
if (idx == 0) continue;//background-image
|
|
let type = objs2[idx - 1].type;
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 1,
|
|
"name": objs2[idx - 1].name,
|
|
"FontColor": objs2[idx - 1].black ? "#000000" : "@",
|
|
"transparency": item.get("opacity"),
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.backData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 11) {
|
|
//circle_text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.backData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 3,
|
|
"name": objs2[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"DefaultText": item.get("text"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontBackgroudColor": item.get("textBackgroundColor"),
|
|
"FontColor": item.get("fill"),
|
|
"Exceed": objs2[idx - 1].exceed,
|
|
"AutoWrap": objs2[idx - 1].autoWrap,
|
|
"FixSize": objs2[idx - 1].fixSize,
|
|
"Bold": item.get("fontWeight") == "bold",
|
|
"Underline": item.get("underline"),
|
|
"Italic": item.get("fontStyle") == "italic",
|
|
"Strikeout": item.get("linethrough"),
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 4,
|
|
"name": objs2[idx - 1].name,
|
|
"FontColor": objs2[idx - 1].color,
|
|
"DefaultText": objs2[idx - 1].val,
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 9) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 5,
|
|
"name": objs2[idx - 1].name,
|
|
"DefaultText": objs2[idx - 1].val,
|
|
"HideText": objs1[idx - 1].show,
|
|
"FontSize": parseInt(objs2[idx - 1].fontSize),
|
|
"FontFamily": objs2[idx - 1].font,
|
|
"FontColor": objs2[idx - 1].color,
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 6,
|
|
"name": objs2[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontColor": item.get("fill"),
|
|
"start": parseInt(objs2[idx - 1].start),
|
|
"add": parseInt(objs2[idx - 1].add),
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
}
|
|
_save(op, callback);
|
|
//return false 开启该代码可禁止点击该按钮关闭
|
|
})
|
|
})
|
|
}
|
|
$('#output').on('click', function () {
|
|
output(null, saveAs);
|
|
return;
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/op_1.png', function (i1) {
|
|
i1.left = background_image.left;
|
|
i1.top = background_image.top;
|
|
let img1 = i1;
|
|
fabric.Image.fromURL('./public/images/op_1.png', function (i2) {
|
|
i2.left = background_image.left;
|
|
i2.top = background_image.top;
|
|
let img2 = i2;
|
|
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#component_type").text(language_str("bg"));//"背景"
|
|
canvas1.discardActiveObject().renderAll();
|
|
canvas2.discardActiveObject().renderAll();
|
|
let _objs1 = canvas1.getObjects();
|
|
let g1 = [];
|
|
let g3 = [];
|
|
let g5 = [];//黑色图层
|
|
let left = 0;//左裁剪
|
|
let top = 0;//顶裁剪
|
|
let black_left = 0;//黑色左裁剪
|
|
let black_top = 0;//黑色顶裁剪
|
|
let all_left = 0;//预览图左裁剪
|
|
let all_top = 0;//预览图顶裁剪
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1);
|
|
//console.log("------");
|
|
//console.log(item.getCoords());
|
|
//console.log(getCoordsMinX(background_image.getCoords()));
|
|
//console.log(getCoordsMinX(item.getCoords()));
|
|
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
|
|
//console.log("------");
|
|
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g3.push(fabric.util.object.clone(item));
|
|
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
|
|
continue;//计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
|
|
continue;//二维码 条形码
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 2)) {
|
|
continue;//合成图片
|
|
}
|
|
if (idx != 0 &&
|
|
(
|
|
(
|
|
objs1[idx - 1].type == 3
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 11
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//圆形文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 5//矩形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 6//圆形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs1[idx - 1].type == 7//直线
|
|
&&
|
|
(item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")
|
|
)
|
|
||
|
|
objs1[idx - 1].black == true //勾选并入黑色图层
|
|
// (
|
|
// objs1[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs1[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
)
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g1.push(fabric.util.object.clone(item));
|
|
continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g1.push(fabric.util.object.clone(item));
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g1.push(fabric.util.object.clone(item));
|
|
}
|
|
let url1 = new fabric.Group(g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
g3.push(img1);
|
|
let url3 = new fabric.Group(g3).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: all_top,
|
|
left: all_left
|
|
});
|
|
let url5 = new fabric.Group(g5).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: black_top,
|
|
left: black_left
|
|
});
|
|
let _objs2 = canvas2.getObjects();
|
|
let g2 = [];
|
|
let g4 = [];
|
|
let g6 = [];//黑色图层
|
|
left = 0;
|
|
top = 0;
|
|
black_left = 0;//黑色左裁剪
|
|
black_top = 0;//黑色顶裁剪
|
|
all_left = 0;//黑色左裁剪
|
|
all_top = 0;//黑色顶裁剪
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2);
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g4.push(fabric.util.object.clone(item));
|
|
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
|
|
continue;//计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
|
|
continue;//二维码 条形码
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 2)) {
|
|
continue;//合成图片
|
|
}
|
|
if (idx != 0 &&
|
|
(
|
|
(
|
|
objs2[idx - 1].type == 3
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 11
|
|
&&
|
|
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
|
|
//圆形文字 && 黑色
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 5//矩形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 6//圆形
|
|
&&
|
|
(
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("stroke") == "") //黑填充 透明边框
|
|
||
|
|
(item.get("fill") == "" && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //透明填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && (item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")) //黑填充 黑边框
|
|
||
|
|
((item.get("fill") == "#000000" || item.get("fill") == "#ffffff") && item.get("strokeWidth") == 0) //黑填充 0边框
|
|
)
|
|
)
|
|
||
|
|
(
|
|
objs2[idx - 1].type == 7//直线
|
|
&&
|
|
(item.get("stroke") == "#000000" || item.get("stroke") == "#ffffff")
|
|
)
|
|
||
|
|
objs2[idx - 1].black == true //勾选并入黑色图层
|
|
// (
|
|
// objs2[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs2[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
)
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g2.push(fabric.util.object.clone(item));
|
|
continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g2.push(fabric.util.object.clone(item));
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
g2.push(fabric.util.object.clone(item));
|
|
|
|
}
|
|
let url2 = new fabric.Group(g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let white_url1 = canvas1.getObjects()[0].toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
});
|
|
g4.push(img2);
|
|
let url4 = new fabric.Group(g4).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: all_top,
|
|
left: all_left
|
|
});
|
|
let url6 = new fabric.Group(g6).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: black_top,
|
|
left: black_left
|
|
});
|
|
// let white_url2 = canvas2.getObjects()[0].toDataURL({
|
|
// height: 2787,
|
|
// width: 2787,
|
|
// });
|
|
//console.log(canvas.getObjects())
|
|
let w = document.body.clientWidth * 0.7 + "px";
|
|
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + "px";
|
|
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + "px";
|
|
|
|
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
|
|
//高度超出，则按高度计算
|
|
h = document.body.clientHeight * 0.8 + "px";
|
|
h1 = document.body.clientHeight * 0.8 - 150 + "px";
|
|
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
|
|
}
|
|
|
|
let op = { frontColorPic: "", backColorPic: "", frontBlackPic: "", backBlackPic: "", frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: '' };
|
|
if (objs1.length != 0 & objs2.length == 0) {
|
|
op.flag = 2;
|
|
} else if (objs1.length == 0 & objs2.length != 0) {
|
|
op.flag = 3;
|
|
}
|
|
op.frontColorPic = desEncrypt(url1);
|
|
op.backColorPic = '';
|
|
//op.frontBlPic = url5;
|
|
//op.backBlPic = url6;
|
|
op.frontBlackPic = '';
|
|
op.backBlackPic = '';
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1);
|
|
if (idx == 0) continue;//background-image
|
|
let type = objs1[idx - 1].type;
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 1,
|
|
"name": objs1[idx - 1].name,
|
|
"FontColor": objs1[idx - 1].black ? "#000000" : "@",
|
|
"transparency": item.get("opacity"),
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.frontData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 11) {
|
|
//circle_text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.frontData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
//out_text
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 3,
|
|
"name": objs1[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"DefaultText": item.get("text"),
|
|
"FontBackgroudColor": item.get("textBackgroundColor"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontColor": item.get("fill"),
|
|
"Exceed": objs1[idx - 1].exceed,
|
|
"AutoWrap": objs1[idx - 1].autoWrap,
|
|
"FixSize": objs1[idx - 1].fixSize,
|
|
"Bold": item.get("fontWeight") == "bold",
|
|
"Underline": item.get("underline"),
|
|
"Italic": item.get("fontStyle") == "italic",
|
|
"Strikeout": item.get("linethrough"),
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 4,
|
|
"name": objs1[idx - 1].name,
|
|
"FontColor": objs1[idx - 1].color,
|
|
"DefaultText": objs1[idx - 1].val,
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 9) {
|
|
//条形码
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 5,
|
|
"name": objs1[idx - 1].name,
|
|
"FontSize": parseInt(objs1[idx - 1].fontSize),
|
|
"DefaultText": objs1[idx - 1].val,
|
|
"HideText": objs1[idx - 1].show,
|
|
"FontFamily": objs1[idx - 1].font,
|
|
"FontColor": objs1[idx - 1].color,
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.frontData.push({
|
|
"type": 6,
|
|
"name": objs1[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontColor": item.get("fill"),
|
|
"start": objs1[idx - 1].start,
|
|
"add": parseInt(objs1[idx - 1].add),
|
|
"x": parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
}
|
|
//obj2
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2);
|
|
if (idx == 0) continue;//background-image
|
|
let type = objs2[idx - 1].type;
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 1,
|
|
"name": objs2[idx - 1].name,
|
|
"FontColor": objs2[idx - 1].black ? "#000000" : "@",
|
|
"transparency": item.get("opacity"),
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.backData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 11) {
|
|
//circle_text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.backData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 3,
|
|
"name": objs2[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"DefaultText": item.get("text"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontBackgroudColor": item.get("textBackgroundColor"),
|
|
"FontColor": item.get("fill"),
|
|
"Exceed": objs2[idx - 1].exceed,
|
|
"AutoWrap": objs2[idx - 1].autoWrap,
|
|
"FixSize": objs2[idx - 1].fixSize,
|
|
"Bold": item.get("fontWeight") == "bold",
|
|
"Underline": item.get("underline"),
|
|
"Italic": item.get("fontStyle") == "italic",
|
|
"Strikeout": item.get("linethrough"),
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 4,
|
|
"name": objs2[idx - 1].name,
|
|
"FontColor": objs2[idx - 1].color,
|
|
"DefaultText": objs2[idx - 1].val,
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 9) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 5,
|
|
"name": objs2[idx - 1].name,
|
|
"DefaultText": objs2[idx - 1].val,
|
|
"HideText": objs1[idx - 1].show,
|
|
"FontSize": parseInt(objs2[idx - 1].fontSize),
|
|
"FontFamily": objs2[idx - 1].font,
|
|
"FontColor": objs2[idx - 1].color,
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item);
|
|
op.backData.push({
|
|
"type": 6,
|
|
"name": objs2[idx - 1].name,
|
|
"FontFamily": item.get("fontFamily"),
|
|
"FontSize": parseInt(item.get("fontSize")),
|
|
"FontColor": item.get("fill"),
|
|
"start": parseInt(objs2[idx - 1].start),
|
|
"add": parseInt(objs2[idx - 1].add),
|
|
"x": parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate": parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
}
|
|
dialog.showSaveDialog({
|
|
title: language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'CS File Type', extensions: ['cs'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.canceled) return;
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.cs';
|
|
}
|
|
let fs = require('fs')
|
|
op.soonType = 1
|
|
fs.writeFileSync(result.filePath, JSON.stringify(op))
|
|
}).catch(err => {
|
|
console.log()
|
|
})
|
|
//return false 开启该代码可禁止点击该按钮关闭
|
|
})
|
|
})
|
|
});
|
|
var _keyctrl = false, _keyc = false, _textEdit = false, _inputEdit = false;
|
|
$("input").focus(function () {
|
|
console.log(1)
|
|
_inputEdit = true
|
|
})
|
|
$("input").blur(function () {
|
|
_inputEdit = false
|
|
})
|
|
$("textarea").focus(function () {
|
|
console.log(1)
|
|
_inputEdit = true
|
|
})
|
|
$("textarea").blur(function () {
|
|
_inputEdit = false
|
|
})
|
|
$("body").keyup(function (event) {
|
|
if (event.keyCode == 17) {
|
|
_keyctrl = false;
|
|
};
|
|
if (event.keyCode == 67) {
|
|
_keyc = false;
|
|
};
|
|
})
|
|
$("body").keydown(function (event) {
|
|
if (event.keyCode == 17) {
|
|
_keyctrl = true;
|
|
if (_keyc && _textEdit) {
|
|
//同时按下且在编辑状态
|
|
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
|
|
//clipboard.writeText((clipboard.readText()+' '))
|
|
}
|
|
}
|
|
if (event.keyCode == 67) {
|
|
_keyc = true;
|
|
if (_keyctrl & _textEdit) {
|
|
//同时按下且在编辑状态
|
|
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
|
|
//clipboard.writeText((clipboard.readText()+' '))
|
|
}
|
|
}
|
|
if (event.keyCode == 37) {
|
|
//left
|
|
let v = -1;
|
|
if (_keyctrl) {
|
|
v = -5;
|
|
}
|
|
let x = canvas.getActiveObject().get("left");
|
|
x += v;
|
|
canvas.getActiveObject().set("left", x);
|
|
canvas.renderAll();
|
|
recordState();
|
|
updateControls();
|
|
}
|
|
if (event.keyCode == 38) {
|
|
//up
|
|
let v = -1;
|
|
if (_keyctrl) {
|
|
v = -5;
|
|
}
|
|
let y = canvas.getActiveObject().get("top");
|
|
y += v;
|
|
canvas.getActiveObject().set("top", y);
|
|
canvas.renderAll();
|
|
recordState();
|
|
updateControls();
|
|
}
|
|
if (event.keyCode == 39) {
|
|
//right
|
|
let v = 1;
|
|
if (_keyctrl) {
|
|
v = 5;
|
|
}
|
|
let x = canvas.getActiveObject().get("left");
|
|
x += v;
|
|
canvas.getActiveObject().set("left", x);
|
|
canvas.renderAll();
|
|
recordState();
|
|
updateControls();
|
|
}
|
|
if (event.keyCode == 40) {
|
|
//down
|
|
let v = +1;
|
|
if (_keyctrl) {
|
|
v = 5;
|
|
}
|
|
let y = canvas.getActiveObject().get("top");
|
|
y += v;
|
|
canvas.getActiveObject().set("top", y);
|
|
canvas.renderAll();
|
|
recordState();
|
|
updateControls();
|
|
}
|
|
if (event.keyCode != 46 || _inputEdit || _textEdit) return;
|
|
let actObjs = canvas.getActiveObjects();
|
|
let allObjs = canvas.getObjects();
|
|
let flag = 0;
|
|
for (let item of actObjs) {
|
|
if (item != allObjs[0]) {
|
|
let i = getIndex(item);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
|
|
objs.splice(i - 1, 1);
|
|
canvas.remove(item);
|
|
flag = 1;
|
|
|
|
}
|
|
}
|
|
updateList();
|
|
canvas.discardActiveObject();
|
|
if (flag == 1) {
|
|
recordState();
|
|
canvas.renderAll();
|
|
handleObjectSelected()
|
|
}
|
|
});
|
|
let pre_add_image;
|
|
$("#addPic").click(function () {
|
|
OpenDialog();
|
|
function OpenDialog() {
|
|
dialog.showOpenDialog({
|
|
title: language_str("selectPic"),//请选择图片
|
|
buttonLabel: language_str("comf"),//"确认"
|
|
filters: [
|
|
{ name: 'Image File Type', extensions: ['png', 'jpg', 'jpeg'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.canceled) return;
|
|
//console.log(result.filePaths)
|
|
fabric.Image.fromURL(result.filePaths[0], function (image) {
|
|
//image.left = pointer.x;
|
|
//image.top = pointer.y;
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
pre_add_image = image;
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 1;
|
|
});
|
|
//canvas.add(image);
|
|
//objs.push({type: 1});
|
|
//canvas.renderAll();
|
|
//updateList();
|
|
//recordState();
|
|
});
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
});
|
|
$("#addOutPic").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 2;
|
|
});
|
|
$("#addText").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 3;
|
|
});
|
|
|
|
$("#addCircleText").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 11;
|
|
});
|
|
$("#addOutText").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 4;
|
|
});
|
|
$("#addRect").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 5;
|
|
});
|
|
$("#addCircle").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 6;
|
|
});
|
|
$("#addLine").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 7;
|
|
});
|
|
$("#addQrCode").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 8;
|
|
});
|
|
$("#addBarCode").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addCounter").css("background-color", "");
|
|
addState = 9;
|
|
});
|
|
$("#addCounter").click(function () {
|
|
background_image.hoverCursor = "crosshair";
|
|
$(this).css("background-color", "#646E76");
|
|
|
|
$("#addPic").css("background-color", "");
|
|
$("#addOutPic").css("background-color", "");
|
|
$("#addText").css("background-color", "");
|
|
$("#addCircleText").css("background-color", "");
|
|
$("#addOutText").css("background-color", "");
|
|
$("#addRect").css("background-color", "");
|
|
$("#addCircle").css("background-color", "");
|
|
$("#addLine").css("background-color", "");
|
|
$("#addQrCode").css("background-color", "");
|
|
$("#addBarCode").css("background-color", "");
|
|
addState = 10;
|
|
});
|
|
$("#version_change").click(function () {
|
|
if (bg_version == 1) {
|
|
bg_version = 2;
|
|
} else {
|
|
bg_version = 1;
|
|
}
|
|
// 类型改变
|
|
$("#source_front").attr("src", "./public/images/front_bg" + bg_version + "_1.png");
|
|
canvas.renderAll();
|
|
|
|
});
|
|
$("#front_side").click(function () {
|
|
$(this).addClass("ui-button-active");
|
|
$("#back_side").removeClass("ui-button-active");
|
|
$(".canvas-container:eq(0)").show();
|
|
$(".canvas-container:eq(1)").hide();
|
|
console.log("------");
|
|
console.log(recordObjs1);
|
|
console.log("------");
|
|
canvas = canvas1;
|
|
objs = objs1;
|
|
background_image = background_image1;
|
|
next_objs = next_objs1;
|
|
pre_objs = pre_objs1;
|
|
next_json = next_json1;
|
|
pre_json = pre_json1;
|
|
recordObjs = recordObjs1;
|
|
recordJson = recordJson1;
|
|
step = step1;
|
|
updateList();
|
|
|
|
$("#line_control").hide();
|
|
$("#base_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#component_type").text(language_str("bg"));//背景
|
|
});
|
|
$("#back_side").click(function () {
|
|
$(this).addClass("ui-button-active");
|
|
$("#front_side").removeClass("ui-button-active");
|
|
$(".canvas-container:eq(0)").hide();
|
|
$(".canvas-container:eq(1)").show();
|
|
canvas = canvas2;
|
|
objs = objs2;
|
|
background_image = background_image2;
|
|
next_objs = next_objs2;
|
|
pre_objs = pre_objs2;
|
|
next_json = next_json2;
|
|
pre_json = pre_json2;
|
|
recordObjs = recordObjs2;
|
|
recordJson = recordJson2;
|
|
step = step2;
|
|
updateList();
|
|
$("#line_control").hide();
|
|
$("#base_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#component_type").text(language_str("bg"));//"背景"
|
|
});
|
|
$("#top_alignment").click(function () {
|
|
let _objs = canvas.getActiveObjects();
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
_objs[0].set("top", background_image.get("top"));
|
|
canvas.renderAll();
|
|
return;
|
|
}
|
|
let top = 0;
|
|
for (let item of _objs) {
|
|
let t_top = item.get("top");
|
|
if (t_top < top) {
|
|
top = t_top;
|
|
}
|
|
}
|
|
groupItems = [];
|
|
for (let item of _objs) {
|
|
item.set("top", top);
|
|
groupItems.push(item);
|
|
}
|
|
canvas.discardActiveObject();
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas,
|
|
});
|
|
canvas.setActiveObject(sel);
|
|
canvas.requestRenderAll();
|
|
canvas.renderAll();
|
|
|
|
});
|
|
$("#bottom_alignment").click(function () {
|
|
let _objs = canvas.getActiveObjects();
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0]);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = _objs[0].get("strokeWidth")
|
|
}
|
|
_objs[0].set("top", background_image.get("top") + background_image.get("height") - _objs[0].get("height") * _objs[0].get("scaleY") - other);
|
|
canvas.renderAll();
|
|
return;
|
|
}
|
|
let bottom = 0;
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get("strokeWidth")
|
|
}
|
|
let t_b = item.get("top") + item.get("height") * item.get("scaleY") + other;
|
|
if (t_b > bottom) {
|
|
bottom = t_b;
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get("strokeWidth")
|
|
}
|
|
item.set("top", bottom - item.get("height") * item.get("scaleY") - other);
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject();
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas,
|
|
});
|
|
canvas.setActiveObject(sel);
|
|
canvas.requestRenderAll();
|
|
canvas.renderAll();
|
|
|
|
});
|
|
$("#center_y_alignment").click(function () {
|
|
let _objs = canvas.getActiveObjects();
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0]);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = _objs[0].get("strokeWidth")
|
|
}
|
|
_objs[0].set("top", background_image.get("top") + (background_image.get("height") - (_objs[0].get("height") + other) * _objs[0].get("scaleY")) / 2);
|
|
canvas.renderAll();
|
|
return;
|
|
}
|
|
let top = 0;
|
|
for (let item of _objs) {
|
|
let t_top = item.get("top");
|
|
if (t_top < top) {
|
|
top = t_top;
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get("strokeWidth")
|
|
}
|
|
item.set("top", top + (item.group.height - (item.get("height") + other) * item.get("scaleY")) / 2);
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject();
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas,
|
|
});
|
|
canvas.setActiveObject(sel);
|
|
canvas.requestRenderAll();
|
|
canvas.renderAll();
|
|
});
|
|
$("#left_alignment").click(function () {
|
|
let _objs = canvas.getActiveObjects();
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
_objs[0].set("left", background_image.get("left"));
|
|
canvas.renderAll();
|
|
return;
|
|
}
|
|
let left = 0;
|
|
for (let item of _objs) {
|
|
let t_left = item.get("left");
|
|
if (t_left < left) {
|
|
left = t_left;
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
item.set("left", left);
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject();
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas,
|
|
});
|
|
canvas.setActiveObject(sel);
|
|
canvas.requestRenderAll();
|
|
canvas.renderAll();
|
|
});
|
|
$("#right_alignment").click(function () {
|
|
let _objs = canvas.getActiveObjects();
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0]);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get("strokeWidth")
|
|
}
|
|
_objs[0].set("left", background_image.get("left") + background_image.get("width") - _objs[0].get("width") * _objs[0].get("scaleX") - other);
|
|
canvas.renderAll();
|
|
return;
|
|
}
|
|
let right = 0;
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get("strokeWidth")
|
|
}
|
|
let t_r = item.get("left") + item.get("width") * item.get("scaleX") + other;
|
|
if (t_r > right) {
|
|
right = t_r;
|
|
}
|
|
}
|
|
let groupItems = []
|
|
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get("strokeWidth")
|
|
}
|
|
item.set("left", right - item.get("width") * item.get("scaleX") - other);
|
|
groupItems.push(item)
|
|
}
|
|
//BUG1
|
|
canvas.discardActiveObject();
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas,
|
|
});
|
|
canvas.setActiveObject(sel);
|
|
canvas.requestRenderAll();
|
|
canvas.renderAll();
|
|
});
|
|
$("#center_x_alignment").click(function () {
|
|
let _objs = canvas.getActiveObjects();
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0]);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = _objs[0].get("strokeWidth")
|
|
}
|
|
_objs[0].set("left", background_image.get("left") + (background_image.get("width") - (_objs[0].get("width") + other) * _objs[0].get("scaleX")) / 2);
|
|
canvas.renderAll();
|
|
return;
|
|
}
|
|
let left = 0;
|
|
for (let item of _objs) {
|
|
let t_left = item.get("left");
|
|
if (t_left < left) {
|
|
left = t_left;
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item);
|
|
let type = objs[idx - 1].type;
|
|
let other = 0;//strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get("strokeWidth")
|
|
}
|
|
item.set("left", left + (item.group.width - (item.get("width") + other) * item.get("scaleX")) / 2);
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject();
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas,
|
|
});
|
|
canvas.setActiveObject(sel);
|
|
canvas.requestRenderAll();
|
|
canvas.renderAll();
|
|
});
|
|
$("#up_obj").click(function () {//上移，放到前面 数组中在后面
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
if (idx + 1 != canvas.getObjects().length) {
|
|
canvas.bringForward(canvas.getActiveObject());
|
|
canvas.renderAll();
|
|
let temp = objs[idx - 1];
|
|
objs[idx - 1] = objs[idx];
|
|
objs[idx] = temp;
|
|
//console.log(objs);
|
|
//[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];
|
|
|
|
recordState();
|
|
updateList();
|
|
selectObj(idx);
|
|
}
|
|
});
|
|
$("#down_obj").click(function () {//下移，放到后面 数组中在前面
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
if (idx != 1) {
|
|
canvas.sendBackwards(canvas.getActiveObject());
|
|
canvas.renderAll();
|
|
//[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];
|
|
|
|
let temp = objs[idx - 1];
|
|
objs[idx - 1] = objs[idx - 2];
|
|
objs[idx - 2] = temp;
|
|
recordState();
|
|
updateList();
|
|
selectObj(idx - 2);
|
|
}
|
|
});
|
|
$("#set_bg").click(function () {//设置为背景
|
|
let obj = canvas.getActiveObject();
|
|
console.log(obj, obj.get("selectable"))
|
|
let idx = getIndex(obj);
|
|
const scaleX = 2787 / obj.width
|
|
const scaleY = 2787 / obj.height
|
|
obj.set({
|
|
scaleX: scaleX,
|
|
scaleY: scaleY,
|
|
left: ($('#canvas1').width() - 2787) / 2,
|
|
top: ($('#canvas1').height() - 2787) / 2,
|
|
});
|
|
$('#text_w').val(2787)
|
|
$('#text_h').val(2787)
|
|
$('#text_x').val(0)
|
|
$('#text_y').val(0)
|
|
if (obj.get("selectable")) {
|
|
obj.set("selectable", false);
|
|
$("#lock_img").attr("src", "public/images/lock20.png")
|
|
}
|
|
canvas.sendToBack(obj);
|
|
canvas.bringForward(obj);
|
|
canvas.renderAll();
|
|
let objItem = objs.splice(idx - 1, 1)[0]
|
|
objs.unshift(objItem)
|
|
recordState();
|
|
updateList();
|
|
selectObj(0);
|
|
});
|
|
$("#previous").click(function () {//撤销一次操作
|
|
if (step.val == 0) {
|
|
return;
|
|
}
|
|
|
|
step.val--;
|
|
console.log(recordJson[step.val]);
|
|
canvas.loadFromJSON(recordJson[step.val]);
|
|
if ($("#front_side").hasClass("ui-button-active")) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs1 = JSON.parse(recordObjs[step.val]);
|
|
objs = objs1;
|
|
} else if ($("#back_side").hasClass("ui-button-active")) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs2 = JSON.parse(recordObjs[step.val]);
|
|
objs = objs2;
|
|
}
|
|
|
|
background_image = canvas.getObjects()[0];
|
|
canvas.renderAll();
|
|
//recordState();
|
|
updateList();
|
|
|
|
selectObj(-1);
|
|
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
});
|
|
$("#next").click(function () {//撤销一次撤销操作
|
|
if (step.val >= recordObjs.length - 1) {
|
|
return;
|
|
}
|
|
|
|
++step.val;
|
|
canvas.loadFromJSON(recordJson[step.val]);
|
|
if ($("#front_side").hasClass("ui-button-active")) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs1 = JSON.parse(recordObjs[step.val]);
|
|
objs = objs1;
|
|
} else if ($("#back_side").hasClass("ui-button-active")) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs2 = JSON.parse(recordObjs[step.val]);
|
|
objs = objs2;
|
|
}
|
|
background_image = canvas.getObjects()[0];
|
|
canvas.renderAll();
|
|
selectObj(-1);
|
|
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
updateList();
|
|
});
|
|
$("#clean").click(function () {
|
|
objs.splice(0, objs.length);
|
|
|
|
let allObjs = canvas.getObjects();
|
|
for (let item of allObjs) {
|
|
if (item != allObjs[0]) {
|
|
canvas.remove(item);
|
|
}
|
|
}
|
|
updateList();
|
|
recordState();
|
|
});
|
|
$("#rotate").click(function () {
|
|
let obj = canvas.getActiveObject();
|
|
obj.rotate(Math.round((obj.get("angle") + 90) % 360));
|
|
$("#text_r").val(obj.get("angle"));
|
|
canvas.renderAll();
|
|
updateControls();
|
|
recordState();
|
|
});
|
|
$('#vertical_obj').click(function () {
|
|
let obj = canvas.getActiveObject();
|
|
obj.set("flipY", !obj.get("flipY"));
|
|
canvas.renderAll();
|
|
updateControls();
|
|
recordState();
|
|
});
|
|
$('#align_obj').click(function () {
|
|
let obj = canvas.getActiveObject();
|
|
obj.set("flipX", !obj.get("flipX"));
|
|
canvas.renderAll();
|
|
updateControls();
|
|
recordState();
|
|
});
|
|
$("#text_italics").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选
|
|
canvas.getActiveObject().set("fontStyle", "normal")
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("fontStyle", "italic")
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#text_bold").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选,恢复正常
|
|
canvas.getActiveObject().set("fontWeight", "normal")
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("fontWeight", "bold")
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#text_underline").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选
|
|
canvas.getActiveObject().set("underline", false)
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("underline", true)
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#text_linethrough").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选
|
|
canvas.getActiveObject().set("linethrough", false)
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("linethrough", true)
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
|
|
$("#circle_text_italics").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选
|
|
canvas.getActiveObject().set("fontStyle", "normal")
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("fontStyle", "italic")
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#circle_text_bold").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选,恢复正常
|
|
canvas.getActiveObject().set("fontWeight", "normal")
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("fontWeight", "bold")
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
|
|
$("#out_text_italics").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选
|
|
canvas.getActiveObject().set("fontStyle", "normal")
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("fontStyle", "italic")
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#out_text_bold").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选,恢复正常
|
|
canvas.getActiveObject().set("fontWeight", "normal")
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("fontWeight", "bold")
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#out_text_underline").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选
|
|
canvas.getActiveObject().set("underline", false)
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("underline", true)
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#out_text_linethrough").click(function () {
|
|
if ($(this).hasClass("ui-radio-acitve")) {
|
|
//已选
|
|
canvas.getActiveObject().set("linethrough", false)
|
|
$(this).removeClass("ui-radio-acitve")
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set("linethrough", true)
|
|
$(this).addClass("ui-radio-acitve")
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#lock").click(function () {
|
|
canvas.getActiveObject().set("selectable", !canvas.getActiveObject().get("selectable"));
|
|
if (canvas.getActiveObject().get("selectable")) {
|
|
$("#lock_img").attr("src", "public/images/unlock20.png")//已经上锁，需要解锁
|
|
} else {
|
|
$("#lock_img").attr("src", "public/images/lock20.png")//没上锁，可以上锁
|
|
}
|
|
recordState();
|
|
canvas.renderAll();
|
|
});
|
|
$("#text_back_transparent").click(function () {
|
|
canvas.getActiveObject().set("textBackgroundColor", "");
|
|
$("#text_back_color").val("#ffffff");
|
|
canvas.renderAll();
|
|
});
|
|
$("#circle_text_back_transparent").click(function () {
|
|
canvas.getActiveObject().set("textBackgroundColor", "");
|
|
$("#circle_text_back_color").val("#ffffff");
|
|
canvas.renderAll();
|
|
});
|
|
$("#out_text_back_transparent").click(function () {
|
|
canvas.getActiveObject().set("textBackgroundColor", "");
|
|
$("#out_text_back_color").val("#ffffff");
|
|
canvas.renderAll();
|
|
});
|
|
$("#rect_transparent").click(function () {
|
|
canvas.getActiveObject().set("fill", "");
|
|
$("#rect_color").val("#ffffff");
|
|
canvas.renderAll();
|
|
});
|
|
$("#rect_stroke_transparent").click(function () {
|
|
canvas.getActiveObject().set("stroke", "");
|
|
$("#rect_stroke").val("#ffffff");
|
|
canvas.renderAll();
|
|
});
|
|
$("#circle_transparent").click(function () {
|
|
canvas.getActiveObject().set("fill", "");
|
|
$("#circle_color").val("#ffffff");
|
|
canvas.renderAll();
|
|
});
|
|
$("#circle_stroke_transparent").click(function () {
|
|
canvas.getActiveObject().set("stroke", "");
|
|
$("#circle_stroke").val("#ffffff");
|
|
canvas.renderAll();
|
|
});
|
|
function saveAs(op1, callback) {
|
|
let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let _g1 = [], _g2 = [];
|
|
let left = 0, top = 0;
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o));
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
left = 0, top = 0;
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o));
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
|
|
let con_o = Object.assign(o, op1);
|
|
dialog.showSaveDialog({
|
|
title: language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.filePath == "") { return; }
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon';
|
|
}
|
|
let fs = require('fs')
|
|
con_o.soonType = 1
|
|
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
|
|
openAs.name = result.filePath;
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
callback();
|
|
}).catch(err => {
|
|
console.log()
|
|
})
|
|
}
|
|
function save(op1, callback) {
|
|
let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let _g1 = [], _g2 = [];
|
|
let left = 0, top = 0;
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o));
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
left = 0, top = 0;
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o));
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
|
|
let con_o = Object.assign(o, op1);
|
|
if (openAs.name != "") {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
con_o.soonType = 1
|
|
fs.writeFileSync(openAs.name, JSON.stringify(con_o))
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
callback();
|
|
return;
|
|
}
|
|
dialog.showSaveDialog({
|
|
title: language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.filePath == "") { return; }
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon';
|
|
}
|
|
let fs = require('fs')
|
|
con_o.soonType = 1
|
|
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
|
|
openAs.name = result.filePath;
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
callback();
|
|
}).catch(err => {
|
|
console.log()
|
|
})
|
|
}
|
|
$("#save").click(function () {
|
|
output();
|
|
return;
|
|
let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let _g1 = [], _g2 = [];
|
|
let left = 0, top = 0;
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o));
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
left = 0, top = 0;
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o));
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
|
|
let con_o = Object.assign(o, op1);
|
|
console.log(op1);
|
|
if (openAs.name != "") {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
con_o.soonType = 1
|
|
fs.writeFileSync(openAs.name, JSON.stringify(con_o))
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
return;
|
|
}
|
|
dialog.showSaveDialog({
|
|
title: language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.filePath == "") { return; }
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon';
|
|
}
|
|
let fs = require('fs')
|
|
con_o.soonType = 1
|
|
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
|
|
openAs.name = result.filePath;
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
}).catch(err => {
|
|
console.log()
|
|
})
|
|
});
|
|
function getDate() {
|
|
let date = new Date();
|
|
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
|
|
}
|
|
function getAbsoluteXY(_obj) {
|
|
let coord = _obj.get("lineCoords");
|
|
//let xs = [], ys = [];
|
|
//for(let item in coord){
|
|
// xs.push(coord[item].x);
|
|
// ys.push(coord[item].y);
|
|
//}
|
|
//xs.sort(function(a,b){return a-b});
|
|
//ys.sort(function(a,b){return a-b});
|
|
//return [xs[0], ys[0]];
|
|
return [_obj.get("left"), _obj.get("top")]
|
|
}
|
|
let fullPath = path.join(exePath, 'data.json')
|
|
function saveHistory() {
|
|
let fs = require('fs')
|
|
let j = {};
|
|
try {
|
|
fsData = fs.readFileSync(fullPath)
|
|
j = JSON.parse(fsData.toString());
|
|
for (let item of j.history) {
|
|
if (item.path == openAs.name) {
|
|
item.time = getDate();
|
|
fs.writeFileSync(fullPath, JSON.stringify(j))
|
|
return;
|
|
}
|
|
}
|
|
j.history.push({ time: getDate(), path: openAs.name });
|
|
fs.writeFileSync(fullPath, JSON.stringify(j))
|
|
} catch (e) {
|
|
let j = { history: { time: getDate(), path: openAs.name } }
|
|
fs.writeFileSync(fullPath, JSON.stringify(j))
|
|
}
|
|
}
|
|
function open(file) {
|
|
console.log(file)
|
|
let fs = require('fs')
|
|
var fsData = fs.readFileSync(file)
|
|
openAs.name = file;
|
|
let j = JSON.parse(fsData.toString());
|
|
let left = background_image.left;
|
|
let top = background_image.top;
|
|
let new_left = j.f.objects[0].left;
|
|
let new_top = j.f.objects[0].top;
|
|
for (let o of j.f.objects) {
|
|
o.left = o.left - new_left + left;
|
|
o.top = o.top - new_top + top;
|
|
}
|
|
// for (let o of j.b.objects) {
|
|
// o.left = o.left - new_left + left;
|
|
// o.top = o.top - new_top + top;
|
|
// }
|
|
console.log(j.f)
|
|
canvas1.loadFromJSON(j.f);
|
|
canvas2.loadFromJSON(j.b);
|
|
background_image1 = canvas1.getObjects()[0];
|
|
background_image2 = canvas2.getObjects()[0];
|
|
|
|
objs2 = j.bo;
|
|
objs1 = j.fo;
|
|
step1.val = 0;
|
|
step2.val = 0;
|
|
recordJson1 = [];
|
|
recordJson2 = [];
|
|
recordObjs1 = [];
|
|
recordObjs2 = [];
|
|
if ($("#front_side").hasClass("ui-button-active")) {
|
|
objs = objs1;
|
|
recordObjs = recordObjs1;
|
|
recordJson = recordJson1;
|
|
step = step1;
|
|
background_image = background_image1;
|
|
} else if ($("#back_side").hasClass("ui-button-active")) {
|
|
objs = objs2;
|
|
recordObjs = recordObjs2;
|
|
recordJson = recordJson2;
|
|
background_image = background_image2;
|
|
step = step2;
|
|
}
|
|
canvas1.renderAll();
|
|
canvas2.renderAll();
|
|
updateList(); /*
|
|
修复打开新文件后无法撤销的bug
|
|
2022-07-16
|
|
*/
|
|
setTimeout(() => {
|
|
recordObjs1.push(JSON.stringify(objs1))
|
|
let j1 = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
j1.objects[0].hoverCursor = "default";
|
|
recordJson1.push(j1);
|
|
|
|
recordObjs2.push(JSON.stringify(objs2))
|
|
let j2 = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
j2.objects[0].hoverCursor = "default";
|
|
recordJson2.push(j2);
|
|
}, 0);
|
|
}
|
|
$("#open").click(function () {
|
|
if (step.val == 0) {
|
|
OpenDialog();
|
|
return;
|
|
}
|
|
layer.confirm('<font style="color:black">' + language_str("whetherSave") + '</font>', function (index) {//confirm 是否保存当前文件？
|
|
//let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
//let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
//let o = { f : j, b : b,fo : objs1, bo : objs2};
|
|
//if(openAs != ""){
|
|
// //打开的文件
|
|
// let fs = require('fs')
|
|
// fs.writeFileSync(openAs,JSON.stringify(o))
|
|
// layer.msg('保存成功至'+ openAs);
|
|
//
|
|
// OpenDialog();return;
|
|
//}
|
|
//dialog.showSaveDialog({
|
|
// title:'保存文件',
|
|
// filters: [
|
|
// { name: 'FCS File Type', extensions: ['fcs'] },
|
|
// ]
|
|
//}).then(result=>{
|
|
// let fs = require('fs')
|
|
// fs.writeFileSync(result.filePath,JSON.stringify(o))
|
|
//
|
|
// OpenDialog();
|
|
//}).catch(err=>{
|
|
// console.log()
|
|
//})
|
|
/*
|
|
let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
let _g1 = [], _g2 = [];
|
|
let left = 0, top = 0;
|
|
for( let _o of canvas1.getObjects() ){
|
|
if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o));
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top:top/zoom,
|
|
left:left/zoom
|
|
});
|
|
left = 0, top = 0;
|
|
for( let _o of canvas2.getObjects() ){
|
|
if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o));
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top:top/zoom,
|
|
left:left/zoom
|
|
});
|
|
let o = { f : j, b : {},fo : objs1, bo : objs2,fp:fp,bp:''};
|
|
if(openAs.name != ""){
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
fs.writeFileSync(openAs.name,JSON.stringify(o))
|
|
layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
|
|
OpenDialog();
|
|
return;
|
|
}
|
|
dialog.showSaveDialog({
|
|
title:language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result=>{
|
|
if(result.canceled)return;
|
|
if(result.filePath.substring(result.filePath.length-5).indexOf('.') == -1){
|
|
result.filePath += '.soon';
|
|
}
|
|
let fs = require('fs')
|
|
fs.writeFileSync(result.filePath,JSON.stringify(o))
|
|
openAs.name = result.filePath;
|
|
layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
OpenDialog();
|
|
}).catch(err=>{
|
|
console.log()
|
|
})
|
|
*/
|
|
output(OpenDialog);
|
|
layer.close(index);
|
|
|
|
}, function (index) {
|
|
OpenDialog();
|
|
});
|
|
function OpenDialog() {
|
|
dialog.showOpenDialog({
|
|
title: "请选择文件",//confirm
|
|
buttonLabel: language_str("comf"),//"确认"
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.canceled) return;
|
|
console.log(result.filePaths)
|
|
let fs = require('fs')
|
|
var fsData = fs.readFileSync(result.filePaths[0])
|
|
openAs.name = result.filePaths[0];
|
|
let j = JSON.parse(fsData.toString());
|
|
let type = j.soonType ? j.soonType : j.backBlackPic ? 2 : 1;
|
|
if (type == 2) {
|
|
ipcRenderer.send('open-design-page', openAs.name, type);
|
|
return
|
|
}
|
|
let left = background_image.left;
|
|
let top = background_image.top;
|
|
let new_left = j.f.objects[0].left;
|
|
let new_top = j.f.objects[0].top;
|
|
for (let o of j.f.objects) {
|
|
o.left = o.left - new_left + left;
|
|
o.top = o.top - new_top + top;
|
|
}
|
|
// for (let o of j.b.objects) {
|
|
// o.left = o.left - new_left + left;
|
|
// o.top = o.top - new_top + top;
|
|
// }
|
|
canvas1.loadFromJSON(j.f);
|
|
canvas2.loadFromJSON(j.b);
|
|
background_image1 = canvas1.getObjects()[0];
|
|
background_image2 = canvas2.getObjects()[0];
|
|
|
|
objs2 = j.bo;
|
|
objs1 = j.fo;
|
|
step1.val = 0;
|
|
step2.val = 0;
|
|
recordJson1 = [];
|
|
recordJson2 = [];
|
|
recordObjs1 = [];
|
|
recordObjs2 = [];
|
|
if ($("#front_side").hasClass("ui-button-active")) {
|
|
objs = objs1;
|
|
recordObjs = recordObjs1;
|
|
recordJson = recordJson1;
|
|
step = step1;
|
|
background_image = background_image1;
|
|
} else if ($("#back_side").hasClass("ui-button-active")) {
|
|
objs = objs2;
|
|
recordObjs = recordObjs2;
|
|
recordJson = recordJson2;
|
|
background_image = background_image2;
|
|
step = step2;
|
|
}
|
|
canvas1.renderAll();
|
|
canvas2.renderAll();
|
|
updateList();
|
|
/*
|
|
修复打开新文件后无法撤销的bug
|
|
2022-07-16
|
|
*/
|
|
setTimeout(() => {
|
|
recordObjs1.push(JSON.stringify(objs1))
|
|
let j1 = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
j1.objects[0].hoverCursor = "default";
|
|
recordJson1.push(j1);
|
|
|
|
recordObjs2.push(JSON.stringify(objs2))
|
|
let j2 = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
j2.objects[0].hoverCursor = "default";
|
|
recordJson2.push(j2);
|
|
}, 0);
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
});
|
|
function clearAll() {
|
|
//let blank = "{\"f\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":2787,\"height\":2787,\"fill\":\"#000000\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAwAAAKICAYAAAD0EmiCAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3I5Xldx/HvT3SLdk0ljFyN0t1IEjN2TMEHZXcoKEjmQ9HKUkgURQtv8pGlVN6UlqBJN+Kzwhuo0MjKHhi27pJJUbG7IesNJOUurt2s6T/+cmYZd3bmc12zM7M783kd2Acy3+uc831954lvzpxrzX3w2LbtATPz+Jm5bmYeNzPXzszVM/NtM3Pl4b+r7oO35iUJECBAgAABAgQIECBAgMDFFrhjZr58+O8/ZuZzM3PTzPzTzNw4M/+w1vraxX5T62K94LZtj56ZZ8zMj87MDx3iwMV6ea9DgAABAgQIECBAgAABAgQuVYH/nJmPzsxfzsyfrrX+7WIsckGDwbZtD5mZ587M82bmSRdjIa9BgAABAgQIECBAgAABAgQuc4G/m5n3zMx711q3X6hdL0gw2LbtETPzypl54cz4pwUX6nqelwABAgQIECBAgAABAgSaBfZ/yvCumXnTWuvz5xvivAaDQyh43cz8zMx88/l+s56PAAECBAgQIECAAAECBAgQOE3gf2bm92fm9eczHJyXYLBt24MOnyh4jU8U+KtLgAABAgQIECBAgAABAgTuE4H9EwdvOHzi4Cv39h3c62CwbduJQ8nYf+uBBwECBAgQIECAAAECBAgQIHDfCnxqZn56rbX/hoVzfpxzMNi2bf/ZV8zMr87MFef8DvwgAQIECBAgQIAAAQIECBAgcL4F7pyZ187Mm9da27k8+TkFg23bHjwzfzAzzz6XF/UzBAgQIECAAAECBAgQIECAwEUReP/MPH+t9aXjvtqxg8G2bY+cmT+ZmR847ouZJ0CAAAECBAgQIECAAAECBC66wN/PzDPXWp89zisfKxhs23bNzPzFzHz3cV7ELAECBAgQIECAAAECBAgQIHCfCnx6Zn5srXXzUd/FkYPBtm2Pnpm/mZlHHfXJzREgQIAAAQIECBAgQIAAAQL3G4HPzMwPr7VuOco7OlIw2Lbt4TPzsZm59ihPaoYAAQIECBAgQIAAAQIECBC4XwrcNDNPWWt9Ib27GAy2bbtyZj4yM09OT+bPCRAgQIAAAQIECBAgQIAAgfu9wMdn5ifSFyGeNRgcfnXiH83MT93v1/UGCRAgQIAAAQIECBAgQIAAgaMKvG9mnnO2X7mYgsErZ+Y3jvpq5ggQIECAAAECBAgQIECAAIFLRuCX1lpn/P/8ZwwG27ZdNzN/OzNXXDKreqMECBAgQIAAAQIECBAgQIDAUQXuPHyfwQ339AP3GAy2bXvQzHxiZr7/qK9ijgABAgQIECBAgAABAgQIELjkBD41MyfWWl+5+zs/UzB41cy88ZJb0xsmQIAAAQIECBAgQIAAAQIEjivwmrXWaQ3gtGCwbdvVM/MvM3PVcV/BPAECBAgQIECAAAECBAgQIHDJCdwxM49da3321Hd+T8HgnTPzwktuPW+YAAECBAgQIECAAAECBAgQOFeBd621XnTGYLBt26MPny7Yv8PAgwABAgQIECBAgAABAgQIEOgQ2L/DYP+UwS0n1/2GTxhs2/a2mXlJh4UtCRAgQIAAAQIECBAgQIAAgVME3r7WeulpwWDbtofOzGdm5kpcBAgQIECAAAECBAgQIECAQJ3Af83MI9dat+2b3/UJg23bfmFmfqeOw8IECBAgQIAAAQIECBAgQIDASYEXr7XecfdgcP3MPJERAQIECBAgQIAAAQIECBAgUCtw/VrrSXcFg23brpmZm2o5LE6AAAECBAgQIECAAAECBAicFLhm//LDr/+ThG3bXjYzb2VDgAABAgQIECBAgAABAgQI1Au8bK31WyeDwYdm5mn1JAAIECBAgAABAgQIECBAgACBD6+1nr62bXvgzHxxZq5iQoAAAQIECBAgQIAAAQIECNQL3DEzD9uDwXUzc0M9BwACBAgQIECAAAECBAgQIEDgpMCJPRi8YGbezYQAAQIECBAgQIAAAQIECBAgcBB4wR4M3jIzL0dCgAABAgQIECBAgAABAgQIEDgIvHUPBh+YmWchIUCAAAECBAgQIECAAAECBAgcBD64B4P9+wv27zHwIECAAAECBAgQIECAAAECBAjsAjfuweBfZ+Z7eBAgQIAAAQIECBAgQIAAAQIEDgK37sHg8zPzHUgIECBAgAABAgQIECBAgAABAgeB2/dgsP9+xSuRECBAgAABAgQIECBAgAABAgQOAl/dg8GGgwABAgQIECBAgAABAgQIECBwqoBg4O8DAQIECBAgQIAAAQIECBAgcJqAYOAvBQECBAgQIECAAAECBAgQICAY+DtAgAABAgQIECBAgAABAgQIZAGfMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAX2YPDVmXlAHjVBgAABAgQIECBAgAABAgQIlAh8bQ8Gt83MQ0oWtiYBAgQIECBAgAABAgQIECCQBW7fg8GtM/OoPGuCAAECBAgQIECAAAECBAgQKBG4dQ8GN8zMdSULW5MAAQIECBAgQIAAAQIECBDIAjfuweADM/OsPGuCAAECBAgQIECAAAECBAgQKBH44B4M3jIzLy9Z2JoECBAgQIAAAQIECBAgQIBAFnjrHgxeMDPvzrMmCBAgQIAAAQIECBAgQIAAgRKBn9uDwYmZ+UTJwtYkQIAAAQIECBAgQIAAAQIEssCJPRg8cGa+ODNX5XkTBAgQIECAAAECBAgQIECAwGUucMfMPGztS27b9qGZedplvrD1CBAgQIAAAQIECBAgQIAAgSzw4bXW008Gg/1LD/cvP/QgQIAAAQIECBAgQIAAAQIEugVevtb6zZPB4JqZuanbw/YECBAgQIAAAQIECBAgQIDAzFy71rr568Fgf2zbdv3MPBENAQIECBAgQIAAAQIECBAgUCtw/VrrSfv2pwaDF8/Mb9eSWJwAAQIECBAgQIAAAQIECBB48VrrHXcPBg+dmc/OzLfwIUCAAAECBAgQIECAAAECBOoE/ntmrl5r3fYNwWD/H9u2vW1mXlJHYmECBAgQIECAAAECBAgQIEDg7Wutl55kuOufJByCwWNm5p9n5kGcCBAgQIAAAQIECBAgQIAAgRqB/5uZ711r3XKPweAQDd41Mz9fQ2JRAgQIECBAgAABAgQIECBA4HfXWi88leEbPmFwCAaPPHzK4CpeBAgQIECAAAECBAgQIECAwGUvcMfMPHattX+v4V2P04LBIRq8embecNmTWJAAAQIECBAgQIAAAQIECBB47VrrtAZwpmCwf4fBDTPzeG4ECBAgQIAAAQIECBAgQIDAZSvwqZk5sdb6yt03vMdgsA9t23ZiZj42M1dctiwWI0CAAAECBAgQIECAAAECvQJ3zsxT1lr7BwZOe5wxGByiwS/OzK/32tmcAAECBAgQIECAAAECBAhctgKvWmv92pm2S8Fg//M/nplnX7Y8FiNAgAABAgQIECBAgAABAn0C75uZ56y1tnMKBvsPbdv2rTPz5zPz5D4/GxMgQIAAAQIECBAgQIAAgctO4OMz87S11u1n2+ysnzA4+YPbtj388H0G1152TBYiQIAAAQIECBAgQIAAAQI9AjcdvrfgC2nlIwWD/Um2bXvMzHx0Zh6VntSfEyBAgAABAgQIECBAgAABAvc7gc/MzFPXWjcf5Z0dORgcosE1M/ORmfmuozy5GQIECBAgQIAAAQIECBAgQOB+IfDpmfnxtdb+CYMjPY4VDA7RYP+EwZ/MzBOO9AqGCBAgQIAAAQIECBAgQIAAgftS4JMz88y11v4JgyM/jh0MDtHgwTPzhzPzk0d+JYMECBAgQIAAAQIECBAgQIDAxRZ4/8w8f631peO+8DkFg0M02H/2lTPzKzNzxXFf2DwBAgQIECBAgAABAgQIECBwwQTunJlfnpk3ne1XJ57t1c85GJx80m3bThw+bfC4C7amJyZAgAABAgQIECBAgAABAgSOKvCPM/O8tdaNR/2Be5q718Fgf9Jt2/ZPGOyfNnj1zFx1b96QnyVAgAABAgQIECBAgAABAgTOSeCOmXnj4VMF+ycM7tXjvASDk+9g27ZHzMzrZuZnZ+ab7tU788MECBAgQIAAAQIECBAgQIDAUQT+d2Z+b2Zev9b6/FF+4Cgz5zUYnBIOrp6ZV8zMi2bmyqO8ETMECBAgQIAAAQIECBAgQIDAsQS+PDPvnJk3r7U+d6yfPMLwBQkGp4SDh87Mc/d/OzEzP3iE92OEAAECBAgQIECAAAECBAgQOLvA9TPznpl571rrtguFdUGDwalvetu2x8zMM2bmR2bmqTPzsAu1lOclQIAAAQIECBAgQIAAAQKXkcAXZ+avZ+avZubP1lo3X4zdLlowuFs8eMDMPGFmrpuZ75uZa2bmO2fm2w9fmrh/MsGDAAECBAgQIECAAAECBAi0COyfFNi/tPDfZ+bWmbllZvbfdrD/poNPrrW+drEh/h+5oaPdsxLhuQAAAABJRU5ErkJggg==\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"b\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":2787,\"height\":2787,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAwAAAKICAYAAAD0EmiCAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3I5Xldx/HvT3SLdk0ljFyN0t1IEjN2TMEHZXcoKEjmQ9HKUkgURQtv8pGlVN6UlqBJN+Kzwhuo0MjKHhi27pJJUbG7IesNJOUurt2s6T/+cmYZd3bmc12zM7M783kd2Acy3+uc831954lvzpxrzX3w2LbtATPz+Jm5bmYeNzPXzszVM/NtM3Pl4b+r7oO35iUJECBAgAABAgQIECBAgMDFFrhjZr58+O8/ZuZzM3PTzPzTzNw4M/+w1vraxX5T62K94LZtj56ZZ8zMj87MDx3iwMV6ea9DgAABAgQIECBAgAABAgQuVYH/nJmPzsxfzsyfrrX+7WIsckGDwbZtD5mZ587M82bmSRdjIa9BgAABAgQIECBAgAABAgQuc4G/m5n3zMx711q3X6hdL0gw2LbtETPzypl54cz4pwUX6nqelwABAgQIECBAgAABAgSaBfZ/yvCumXnTWuvz5xvivAaDQyh43cz8zMx88/l+s56PAAECBAgQIECAAAECBAgQOE3gf2bm92fm9eczHJyXYLBt24MOnyh4jU8U+KtLgAABAgQIECBAgAABAgTuE4H9EwdvOHzi4Cv39h3c62CwbduJQ8nYf+uBBwECBAgQIECAAAECBAgQIHDfCnxqZn56rbX/hoVzfpxzMNi2bf/ZV8zMr87MFef8DvwgAQIECBAgQIAAAQIECBAgcL4F7pyZ187Mm9da27k8+TkFg23bHjwzfzAzzz6XF/UzBAgQIECAAAECBAgQIECAwEUReP/MPH+t9aXjvtqxg8G2bY+cmT+ZmR847ouZJ0CAAAECBAgQIECAAAECBC66wN/PzDPXWp89zisfKxhs23bNzPzFzHz3cV7ELAECBAgQIECAAAECBAgQIHCfCnx6Zn5srXXzUd/FkYPBtm2Pnpm/mZlHHfXJzREgQIAAAQIECBAgQIAAAQL3G4HPzMwPr7VuOco7OlIw2Lbt4TPzsZm59ihPaoYAAQIECBAgQIAAAQIECBC4XwrcNDNPWWt9Ib27GAy2bbtyZj4yM09OT+bPCRAgQIAAAQIECBAgQIAAgfu9wMdn5ifSFyGeNRgcfnXiH83MT93v1/UGCRAgQIAAAQIECBAgQIAAgaMKvG9mnnO2X7mYgsErZ+Y3jvpq5ggQIECAAAECBAgQIECAAIFLRuCX1lpn/P/8ZwwG27ZdNzN/OzNXXDKreqMECBAgQIAAAQIECBAgQIDAUQXuPHyfwQ339AP3GAy2bXvQzHxiZr7/qK9ijgABAgQIECBAgAABAgQIELjkBD41MyfWWl+5+zs/UzB41cy88ZJb0xsmQIAAAQIECBAgQIAAAQIEjivwmrXWaQ3gtGCwbdvVM/MvM3PVcV/BPAECBAgQIECAAAECBAgQIHDJCdwxM49da3321Hd+T8HgnTPzwktuPW+YAAECBAgQIECAAAECBAgQOFeBd621XnTGYLBt26MPny7Yv8PAgwABAgQIECBAgAABAgQIEOgQ2L/DYP+UwS0n1/2GTxhs2/a2mXlJh4UtCRAgQIAAAQIECBAgQIAAgVME3r7WeulpwWDbtofOzGdm5kpcBAgQIECAAAECBAgQIECAQJ3Af83MI9dat+2b3/UJg23bfmFmfqeOw8IECBAgQIAAAQIECBAgQIDASYEXr7XecfdgcP3MPJERAQIECBAgQIAAAQIECBAgUCtw/VrrSXcFg23brpmZm2o5LE6AAAECBAgQIECAAAECBAicFLhm//LDr/+ThG3bXjYzb2VDgAABAgQIECBAgAABAgQI1Au8bK31WyeDwYdm5mn1JAAIECBAgAABAgQIECBAgACBD6+1nr62bXvgzHxxZq5iQoAAAQIECBAgQIAAAQIECNQL3DEzD9uDwXUzc0M9BwACBAgQIECAAAECBAgQIEDgpMCJPRi8YGbezYQAAQIECBAgQIAAAQIECBAgcBB4wR4M3jIzL0dCgAABAgQIECBAgAABAgQIEDgIvHUPBh+YmWchIUCAAAECBAgQIECAAAECBAgcBD64B4P9+wv27zHwIECAAAECBAgQIECAAAECBAjsAjfuweBfZ+Z7eBAgQIAAAQIECBAgQIAAAQIEDgK37sHg8zPzHUgIECBAgAABAgQIECBAgAABAgeB2/dgsP9+xSuRECBAgAABAgQIECBAgAABAgQOAl/dg8GGgwABAgQIECBAgAABAgQIECBwqoBg4O8DAQIECBAgQIAAAQIECBAgcJqAYOAvBQECBAgQIECAAAECBAgQICAY+DtAgAABAgQIECBAgAABAgQIZAGfMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAX2YPDVmXlAHjVBgAABAgQIECBAgAABAgQIlAh8bQ8Gt83MQ0oWtiYBAgQIECBAgAABAgQIECCQBW7fg8GtM/OoPGuCAAECBAgQIECAAAECBAgQKBG4dQ8GN8zMdSULW5MAAQIECBAgQIAAAQIECBDIAjfuweADM/OsPGuCAAECBAgQIECAAAECBAgQKBH44B4M3jIzLy9Z2JoECBAgQIAAAQIECBAgQIBAFnjrHgxeMDPvzrMmCBAgQIAAAQIECBAgQIAAgRKBn9uDwYmZ+UTJwtYkQIAAAQIECBAgQIAAAQIEssCJPRg8cGa+ODNX5XkTBAgQIECAAAECBAgQIECAwGUucMfMPGztS27b9qGZedplvrD1CBAgQIAAAQIECBAgQIAAgSzw4bXW008Gg/1LD/cvP/QgQIAAAQIECBAgQIAAAQIEugVevtb6zZPB4JqZuanbw/YECBAgQIAAAQIECBAgQIDAzFy71rr568Fgf2zbdv3MPBENAQIECBAgQIAAAQIECBAgUCtw/VrrSfv2pwaDF8/Mb9eSWJwAAQIECBAgQIAAAQIECBB48VrrHXcPBg+dmc/OzLfwIUCAAAECBAgQIECAAAECBOoE/ntmrl5r3fYNwWD/H9u2vW1mXlJHYmECBAgQIECAAAECBAgQIEDg7Wutl55kuOufJByCwWNm5p9n5kGcCBAgQIAAAQIECBAgQIAAgRqB/5uZ711r3XKPweAQDd41Mz9fQ2JRAgQIECBAgAABAgQIECBA4HfXWi88leEbPmFwCAaPPHzK4CpeBAgQIECAAAECBAgQIECAwGUvcMfMPHattX+v4V2P04LBIRq8embecNmTWJAAAQIECBAgQIAAAQIECBB47VrrtAZwpmCwf4fBDTPzeG4ECBAgQIAAAQIECBAgQIDAZSvwqZk5sdb6yt03vMdgsA9t23ZiZj42M1dctiwWI0CAAAECBAgQIECAAAECvQJ3zsxT1lr7BwZOe5wxGByiwS/OzK/32tmcAAECBAgQIECAAAECBAhctgKvWmv92pm2S8Fg//M/nplnX7Y8FiNAgAABAgQIECBAgAABAn0C75uZ56y1tnMKBvsPbdv2rTPz5zPz5D4/GxMgQIAAAQIECBAgQIAAgctO4OMz87S11u1n2+ysnzA4+YPbtj388H0G1152TBYiQIAAAQIECBAgQIAAAQI9AjcdvrfgC2nlIwWD/Um2bXvMzHx0Zh6VntSfEyBAgAABAgQIECBAgAABAvc7gc/MzFPXWjcf5Z0dORgcosE1M/ORmfmuozy5GQIECBAgQIAAAQIECBAgQOB+IfDpmfnxtdb+CYMjPY4VDA7RYP+EwZ/MzBOO9AqGCBAgQIAAAQIECBAgQIAAgftS4JMz88y11v4JgyM/jh0MDtHgwTPzhzPzk0d+JYMECBAgQIAAAQIECBAgQIDAxRZ4/8w8f631peO+8DkFg0M02H/2lTPzKzNzxXFf2DwBAgQIECBAgAABAgQIECBwwQTunJlfnpk3ne1XJ57t1c85GJx80m3bThw+bfC4C7amJyZAgAABAgQIECBAgAABAgSOKvCPM/O8tdaNR/2Be5q718Fgf9Jt2/ZPGOyfNnj1zFx1b96QnyVAgAABAgQIECBAgAABAgTOSeCOmXnj4VMF+ycM7tXjvASDk+9g27ZHzMzrZuZnZ+ab7tU788MECBAgQIAAAQIECBAgQIDAUQT+d2Z+b2Zev9b6/FF+4Cgz5zUYnBIOrp6ZV8zMi2bmyqO8ETMECBAgQIAAAQIECBAgQIDAsQS+PDPvnJk3r7U+d6yfPMLwBQkGp4SDh87Mc/d/OzEzP3iE92OEAAECBAgQIECAAAECBAgQOLvA9TPznpl571rrtguFdUGDwalvetu2x8zMM2bmR2bmqTPzsAu1lOclQIAAAQIECBAgQIAAAQKXkcAXZ+avZ+avZubP1lo3X4zdLlowuFs8eMDMPGFmrpuZ75uZa2bmO2fm2w9fmrh/MsGDAAECBAgQIECAAAECBAi0COyfFNi/tPDfZ+bWmbllZvbfdrD/poNPrrW+drEh/h+5oaPdsxLhuQAAAABJRU5ErkJggg==\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"fo\":[],\"bo\":[]}";
|
|
//let j = JSON.parse(blank);
|
|
//canvas1.setZoom(1);
|
|
//canvas2.setZoom(1);
|
|
//canvas1.loadFromJSON(j.f);
|
|
//canvas2.loadFromJSON(j.b);
|
|
let t_objs1 = canvas1.getObjects();
|
|
let t_objs2 = canvas2.getObjects();
|
|
for (let i = 1; i < t_objs1.length; i++) {
|
|
canvas1.remove(t_objs1[i]);
|
|
}
|
|
for (let i = 1; i < t_objs2.length; i++) {
|
|
canvas2.remove(t_objs2[i]);
|
|
}
|
|
objs2 = [];
|
|
objs1 = [];
|
|
step1.val = 0;
|
|
step2.val = 0;
|
|
recordJson1 = [];
|
|
recordJson2 = [];
|
|
recordObjs1 = [];
|
|
recordObjs2 = [];
|
|
if ($("#front_side").hasClass("ui-button-active")) {
|
|
objs = objs1;
|
|
recordObjs = recordObjs1;
|
|
recordJson = recordJson1;
|
|
step = step1;
|
|
} else if ($("#back_side").hasClass("ui-button-active")) {
|
|
objs = objs2;
|
|
recordObjs = recordObjs2;
|
|
recordJson = recordJson2;
|
|
step = step2;
|
|
}
|
|
openAs.name = "";
|
|
canvas1.renderAll();
|
|
canvas2.renderAll();
|
|
updateList();
|
|
console.log();
|
|
}
|
|
$("#new").click(function () {
|
|
if (step.val == 0) {
|
|
ipcRenderer.send('open-first-page');
|
|
return;
|
|
}
|
|
layer.confirm('<font style="color:black">' + language_str("whetherSave") + '</font>', function (index) {//confirm 是否保存当前文件？
|
|
output(() => ipcRenderer.send('open-first-page'));
|
|
return;
|
|
let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
let _g1 = [], _g2 = [];
|
|
let left = 0, top = 0;
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o));
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
left = 0, top = 0;
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o));
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 2787,
|
|
width: 2787,
|
|
top: top,
|
|
left: left
|
|
});
|
|
let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
|
|
if (openAs.name != "") {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
o.soonType = 1
|
|
fs.writeFileSync(openAs.name, JSON.stringify(o))
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
/*
|
|
2022-07-16 直接跳转至首页
|
|
*/
|
|
ipcRenderer.send('open-first-page');
|
|
//saveHistory();
|
|
//clearAll();
|
|
return;
|
|
}
|
|
dialog.showSaveDialog({
|
|
title: language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result => {
|
|
if (result.filePath == "") { return; }
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon';
|
|
}
|
|
let fs = require('fs')
|
|
o.soonType = 1
|
|
fs.writeFileSync(result.filePath, JSON.stringify(o))
|
|
openAs.name = result.filePath;
|
|
layer.msg(language_str("saveSucc") + openAs.name);//'保存成功至'
|
|
/*
|
|
2022-07-16 直接跳转至首页
|
|
*/
|
|
ipcRenderer.send('open-first-page');
|
|
//saveHistory();
|
|
//clearAll();
|
|
}).catch(err => {
|
|
console.log()
|
|
})
|
|
layer.close(index);
|
|
|
|
}, function (index) {
|
|
/*
|
|
2022-07-16 直接跳转至首页
|
|
*/
|
|
//clearAll();
|
|
ipcRenderer.send('open-first-page');
|
|
});
|
|
});
|
|
function chagneTitle() {
|
|
|
|
}
|
|
function addBackground() {
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/bg_front_1.png', function (image) {
|
|
let width = $("#canvas1").width()
|
|
|
|
image.left = ($("#canvas1").width() - image.width * image.get("scaleX")) / 2;
|
|
image.top = ($("#canvas1").height() - image.height * image.get("scaleY")) / 2;
|
|
|
|
image.selectable = false;
|
|
image.hoverable = false;
|
|
image.hoverCursor = "default"
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
image.scale(1, 1);
|
|
background_image1 = image;
|
|
background_image = background_image1;
|
|
canvas.add(image);
|
|
canvas.renderAll();
|
|
//pre_objs1.push(JSON.stringify(objs1));
|
|
//pre_json1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor"]));
|
|
|
|
recordObjs1.push(JSON.stringify(objs1));
|
|
recordJson1.push(canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]));
|
|
});
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/bg_back.png', function (image) {
|
|
image.left = ($("#canvas2").width() - image.width) / 2;
|
|
image.top = ($("#canvas2").height() - image.height) / 2;
|
|
|
|
image.selectable = false;
|
|
image.hoverable = false;
|
|
image.hoverCursor = "default"
|
|
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
background_image2 = image;
|
|
canvas2.add(image);
|
|
canvas2.renderAll();
|
|
//pre_objs2.push(JSON.stringify(objs2));
|
|
//pre_json2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor"]));
|
|
|
|
recordObjs2.push(JSON.stringify(objs2));
|
|
recordJson2.push(canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]));
|
|
|
|
let file = GetFile().get('file')
|
|
console.log(file)
|
|
if (file && file != 'empty') {
|
|
open(file)
|
|
}
|
|
});
|
|
});
|
|
is_bgi_add = true;
|
|
});
|
|
}
|
|
function selectObject(target, index) {
|
|
updateControls();
|
|
|
|
$("#base_control").show();
|
|
//$("#text_x").val((target.left - background_image.left).toFixed(1));
|
|
//$("#text_y").val((target.top - background_image.top).toFixed(1));
|
|
//$("#text_w").val(parseFloat(target.get("scaleX") * target.get("width")).toFixed(1));
|
|
//$("#text_h").val(parseFloat(target.get("scaleY") * target.get("height")).toFixed(1));
|
|
//$("#text_r").val(target.get("angle").toFixed(0));
|
|
}
|
|
function updateControls() {
|
|
$("#text_r").val(canvas.getActiveObject().get("angle").toFixed(0));
|
|
$("#text_x").val((canvas.getActiveObject().get("left") - background_image.left).toFixed(0));
|
|
$("#text_y").val((canvas.getActiveObject().get("top") - background_image.top).toFixed(0));
|
|
$("#text_h").val((canvas.getActiveObject().get("scaleY") * canvas.getActiveObject().get("height")).toFixed(0));
|
|
$("#text_w").val((canvas.getActiveObject().get("scaleX") * canvas.getActiveObject().get("width")).toFixed(0));
|
|
if (canvas.getActiveObject().get("selectable")) {
|
|
$("#lock_img").attr("src", "public/images/unlock20.png")//已经上锁，需要解锁
|
|
} else {
|
|
$("#lock_img").attr("src", "public/images/lock20.png")//没上锁，可以上锁
|
|
}
|
|
}
|
|
function checkName(name) {
|
|
//检查字段名是否重复了
|
|
for (let item of objs1) {
|
|
if (item.name == name) {
|
|
return false;
|
|
}
|
|
}
|
|
for (let item of objs2) {
|
|
if (item.name == name) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
function resName(pre_name) {
|
|
//返回的是不重复的字段名
|
|
let num = (objs1.length + objs2.length) - 1;
|
|
do {
|
|
num++;
|
|
}
|
|
while (!checkName(pre_name + num));//重复了就再加1
|
|
return pre_name + num;
|
|
}
|
|
function addPic(pointer) {
|
|
|
|
pre_add_image.left = pointer.x;
|
|
pre_add_image.top = pointer.y;
|
|
|
|
canvas.add(pre_add_image);
|
|
|
|
objs.push({ type: 1, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
//OpenDialog();
|
|
//function OpenDialog()
|
|
//{
|
|
// dialog.showOpenDialog({
|
|
// title: "请选择图片",
|
|
// buttonLabel: "确认",
|
|
// filters: [
|
|
// { name: 'Image File Type', extensions: ['png', 'jpg'] },
|
|
// ]
|
|
// }).then(result => {
|
|
// if(result.canceled)return;
|
|
// //console.log(result.filePaths)
|
|
// fabric.Image.fromURL(result.filePaths[0], function(image) {
|
|
// image.left = pointer.x;
|
|
// image.top = pointer.y;
|
|
//
|
|
// canvas.add(image);
|
|
// objs.push({type: 1});
|
|
// canvas.renderAll();
|
|
// updateList();
|
|
// recordState();
|
|
// } );
|
|
// }).catch(err => {
|
|
// console.log(err)
|
|
// })
|
|
//}
|
|
}
|
|
function selectPic(target, index) {
|
|
//透明度
|
|
|
|
$("#pic_control").show();
|
|
$("#set_bg").show();
|
|
pic_op.setValue(100 - (canvas.getActiveObject().get("opacity") * 100));
|
|
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
// $("#pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');
|
|
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#line_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
|
|
}
|
|
function addOutPic(pointer) {
|
|
fabric.Image.fromURL('./public/images/outpic_extra.png', function (image) {
|
|
let width = canvas.getWidth();
|
|
let height = canvas.getHeight();
|
|
image.left = pointer.x;
|
|
image.top = pointer.y;
|
|
image.opacity = 1;
|
|
//image.on("selected",function(){//test well
|
|
// console.log(222);
|
|
//});
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
canvas.add(image);
|
|
objs.push({ type: 2, name: resName("OUT_PIC_"), black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
});
|
|
});
|
|
}
|
|
function selectOutPic(target, index) {
|
|
//字段名
|
|
$("#out_pic_control").show();
|
|
out_pic_op.setValue(100 - (canvas.getActiveObject().get("opacity") * 100));
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
$("#out_pic_field_name").val(objs[idx - 1].name);
|
|
// $("#out_pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');
|
|
|
|
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#line_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
}
|
|
|
|
function addText(pointer) {
|
|
let text = new fabric.Text('TEXT', {//源：文本
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: "#000000",
|
|
textBackgroundColor: "",
|
|
fontStyle: "normal",
|
|
fontWeight: "normal",
|
|
fontSize: 100,
|
|
underline: false,
|
|
linethrough: false,
|
|
fontFamily: 'Arial'
|
|
});
|
|
text.setControlVisible("ml", false);
|
|
text.setControlVisible("mt", false);
|
|
text.setControlVisible("mr", false);
|
|
text.setControlVisible("mb", false);
|
|
canvas.add(text);
|
|
objs.push({ type: 3, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
}
|
|
function selectText() {
|
|
//console.log(canvas.getActiveObject().get("fontFamily"));
|
|
$("#text_control").show();
|
|
$("#text_color").val(canvas.getActiveObject().get("fill"));
|
|
$("#text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor"));
|
|
let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
|
|
if (val%0.5!==0) val = Math.round(val*2)/2
|
|
$("#text_size").val(val);
|
|
$("#text_text").val(canvas.getActiveObject().get("text"));
|
|
$("#text_font_family").val(canvas.getActiveObject().get("fontFamily"));
|
|
|
|
if (canvas.getActiveObject().get("underline") == true) {
|
|
$("#text_underline").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#text_underline").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("fontWeight") == "bold") {
|
|
$("#text_bold").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#text_bold").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("fontStyle") == "italic") {
|
|
$("#text_italics").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#text_italics").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("linethrough") == true) {
|
|
$("#text_linethrough").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#text_linethrough").removeClass("ui-radio-acitve")
|
|
}
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#line_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
|
|
}
|
|
function getDisdance(x1, y1, x2, y2) {
|
|
var dx = Math.abs(x2 - x1); // 计算x轴上的距离差，并取绝对值
|
|
var dy = Math.abs(y2 - y1); // 计算y轴上的距离差，并取绝对值
|
|
var distance = Math.sqrt(dx * dx + dy * dy); // 应用勾股定理计算距离
|
|
return distance;
|
|
}
|
|
function getDeg(pointer) {
|
|
// 计算点击位置与画布中心的坐标差
|
|
var centerX = canvas.width / 2;
|
|
var centerY = canvas.height / 2;
|
|
var mouseX = pointer.x;
|
|
var mouseY = pointer.y;
|
|
var dx = mouseX - centerX;
|
|
var dy = mouseY - centerY;
|
|
// 计算旋转角度（弧度）
|
|
var angleRad = Math.atan2(dy, dx);
|
|
// 将角度转换为度数
|
|
var angleDeg = angleRad * (180/Math.PI);
|
|
if (angleDeg < 0) {
|
|
angleDeg += 360;
|
|
}
|
|
angleDeg += 90
|
|
return angleDeg
|
|
}
|
|
function addCircleText(pointer) {
|
|
let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
|
|
let angleDeg = getDeg(pointer)
|
|
let text = new fabric.CurvedText('Circle TEXT', {//源：圆形文本
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: "#000000",
|
|
textBackgroundColor: "",
|
|
fontStyle: "normal",
|
|
fontWeight: "normal",
|
|
diameter: distance*2,
|
|
fontSize: 100,
|
|
underline: false,
|
|
linethrough: false,
|
|
lockScalingX: true,
|
|
lockScalingY: true,
|
|
fontFamily: 'Arial',
|
|
originX: 'center',
|
|
originY: 'center',
|
|
angle: angleDeg,
|
|
flipped: pointer.y > canvas.height/2 ? true : false
|
|
});
|
|
// distance = getDisdance(pointer.x+text.width/2, pointer.y, canvas.width/2,canvas.height/2)
|
|
// text.set({diameter: distance*2})
|
|
text.setControlVisible("ml", false);
|
|
text.setControlVisible("mt", false);
|
|
text.setControlVisible("mr", false);
|
|
text.setControlVisible("mb", false);
|
|
canvas.add(text);
|
|
objs.push({ type: 11, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
}
|
|
function selectCircleText() {
|
|
console.log(canvas.getActiveObject().get("text"))
|
|
$("#circle_text_control").show();
|
|
$("#circle_text_color").val(canvas.getActiveObject().get("fill"));
|
|
$("#circle_text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor"));
|
|
circle_text_size.setValue(canvas.getActiveObject().get("fontSize") - 10);
|
|
circle_text_diameter.setValue(canvas.getActiveObject().get("diameter")-500);
|
|
$("#circle_text_text").val(canvas.getActiveObject().get("text"));
|
|
$("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily"));
|
|
|
|
if (canvas.getActiveObject().get("underline") == true) {
|
|
$("#circle_text_underline").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#circle_text_underline").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("fontWeight") == "bold") {
|
|
$("#circle_text_bold").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#circle_text_bold").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("fontStyle") == "italic") {
|
|
$("#circle_text_italics").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#circle_text_italics").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("linethrough") == true) {
|
|
$("#circle_text_linethrough").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#circle_text_linethrough").removeClass("ui-radio-acitve")
|
|
}
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#rotate").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#line_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
|
|
}
|
|
function addOutText(pointer) {
|
|
//MERGE_TEXT_1
|
|
let text = new fabric.Text("MERGE TEXT", {//源：合成文本
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: "#000000",
|
|
fontStyle: "normal",
|
|
fontWeight: "normal",
|
|
fontSize: 100,
|
|
textBackgroundColor: "",
|
|
underline: false,
|
|
linethrough: false,
|
|
fontFamily: 'Arial'
|
|
});
|
|
|
|
//text.on({
|
|
// 'scaling': function(e) {
|
|
// var obj = this,
|
|
// w = obj.width * obj.scaleX,
|
|
// h = obj.height * obj.scaleY;
|
|
//
|
|
// obj.set({
|
|
// 'height' : h,
|
|
// 'width' : w,
|
|
// 'scaleX' : 1,
|
|
// 'scaleY' : 1
|
|
// });
|
|
// }
|
|
//});
|
|
text.setControlVisible("ml", false);
|
|
text.setControlVisible("mt", false);
|
|
text.setControlVisible("mr", false);
|
|
text.setControlVisible("mb", false);
|
|
|
|
canvas.add(text);
|
|
objs.push({ type: 4, name: resName("OUT_TEXT_"), exceed: false, autoWrap: false, fixSize: false, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
}
|
|
function selectOutText() {
|
|
//color
|
|
//size
|
|
$("#out_text_control").show();
|
|
$("#out_text_color").val(canvas.getActiveObject().get("fill"));
|
|
$("#out_text_text").val(canvas.getActiveObject().get("text"));
|
|
let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
|
|
if (val%0.5!==0) val = Math.round(val*2)/2
|
|
$("#out_text_size").val(val);
|
|
$("#out_text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor"));
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
$("#out_text_field_name").val(objs[idx - 1].name);
|
|
$("#out_text_font_family").val(canvas.getActiveObject().get("fontFamily"));
|
|
$("#exceed").prop("checked", objs[idx - 1].exceed ? 'checked' : '');
|
|
$("#autoWrap").prop("checked", objs[idx - 1].autoWrap ? 'checked' : '');
|
|
$("#fixSize").prop("checked", objs[idx - 1].fixSize ? 'checked' : '');
|
|
if (canvas.getActiveObject().get("underline") == true) {
|
|
$("#out_text_underline").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#out_text_underline").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("fontWeight") == "bold") {
|
|
$("#out_text_bold").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#out_text_bold").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("fontStyle") == "italic") {
|
|
$("#out_text_italics").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#out_text_italics").removeClass("ui-radio-acitve")
|
|
}
|
|
if (canvas.getActiveObject().get("linethrough") == true) {
|
|
$("#out_text_linethrough").addClass("ui-radio-acitve")
|
|
} else {
|
|
$("#out_text_linethrough").removeClass("ui-radio-acitve")
|
|
}
|
|
|
|
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#line_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
}
|
|
function addRect(pointer) {
|
|
let rect = new fabric.Rect({
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: '',
|
|
stroke: "#ff0000",
|
|
strokeWidth: 10,
|
|
width: 300,
|
|
height: 300
|
|
});
|
|
canvas.add(rect);
|
|
objs.push({ type: 5, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
}
|
|
function selectRect() {
|
|
//color
|
|
$("#rect_control").show();
|
|
$("#rect_color").val(canvas.getActiveObject().get("fill") == "" ? "#ffffff" : canvas.getActiveObject().get("fill"));
|
|
$("#rect_stroke").val(canvas.getActiveObject().get("stroke") == "" ? "#ffffff" : canvas.getActiveObject().get("stroke"));
|
|
$("#rect_stroke_width").val(canvas.getActiveObject().get("strokeWidth"));
|
|
$("#rect_radius").val(canvas.getActiveObject().get("rx"));
|
|
rect_op.setValue(100 - (canvas.getActiveObject().get("opacity") * 100));
|
|
let a = canvas.getActiveObject().getCoords();
|
|
console.log(getCoordsMinX(a));
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#line_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
}
|
|
function addCircle(pointer) {
|
|
let circle = new fabric.Circle({
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: '',
|
|
stroke: '#ff0000',
|
|
strokeWidth: 10,
|
|
radius: 150,
|
|
strokeUniform: true,
|
|
});
|
|
canvas.add(circle);
|
|
objs.push({ type: 6, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
}
|
|
function selectCircle() {
|
|
//border-color
|
|
//color
|
|
$("#circle_control").show();
|
|
$("#circle_color").val(canvas.getActiveObject().get("fill") == "" ? "#ffffff" : canvas.getActiveObject().get("fill"));
|
|
$("#circle_stroke").val(canvas.getActiveObject().get("stroke") == "" ? "#ffffff" : canvas.getActiveObject().get("stroke"));
|
|
$("#circle_stroke_width").val(canvas.getActiveObject().get("strokeWidth"));
|
|
circle_op.setValue(100 - (canvas.getActiveObject().get("opacity") * 100));
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#line_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
}
|
|
function addLine(pointer) {
|
|
let line = new fabric.Line([100, 200, 400, 200], {
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
stroke: '#ff0000',
|
|
strokeWidth: 10,
|
|
strokeDashArray: [0, 0],
|
|
});
|
|
|
|
line.setControlVisible("tl", false);
|
|
line.setControlVisible("tr", false);
|
|
line.setControlVisible("br", false);
|
|
line.setControlVisible("bl", false);
|
|
line.setControlVisible("mt", false);
|
|
line.setControlVisible("mb", false);
|
|
canvas.add(line);
|
|
objs.push({ type: 7, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
}
|
|
function selectLine() {
|
|
//color
|
|
//weight
|
|
$("#line_control").show();
|
|
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
$("#line_color").val(canvas.getActiveObject().get("stroke"));
|
|
$("#line_dist").val(canvas.getActiveObject().get("strokeDashArray")[0]);
|
|
$("#text_h").val(canvas.getActiveObject().get("strokeWidth"))
|
|
|
|
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
}
|
|
function addQrCode(pointer) {
|
|
|
|
let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0 });
|
|
fabric.Image.fromURL(qr, function (image) {
|
|
image.left = pointer.x;
|
|
image.top = pointer.y;
|
|
image.scale(2.4, 2.4)
|
|
canvas.add(image);
|
|
objs.push({ type: 8, name: resName("QR_CODE_"), color: "#000000", val: "https://www.cardsoon.com", black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
});
|
|
}
|
|
function selectQrCode() {
|
|
//字段名
|
|
//background-color
|
|
//color
|
|
$("#qrcode_Controll").show();
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
$("#qrcode_field_name").val(objs[idx - 1].name);
|
|
$("#qrcode_color").val(objs[idx - 1].color);
|
|
$("#qrcode_val").val(objs[idx - 1].val);
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#barcode_controll").hide();
|
|
}
|
|
function addBarCode(pointer) {
|
|
JsBarcode("#barcode", "123456789", { margin: 0, lineColor: "#000000", fontSize: 18, font: "Arial" });
|
|
let barcode = document.getElementById('barcode');
|
|
let bar = barcode.toDataURL("image/png");
|
|
fabric.Image.fromURL(bar, function (image) {
|
|
image.left = pointer.x;
|
|
image.top = pointer.y;
|
|
image.scale(2.4, 2.4)
|
|
canvas.add(image);
|
|
objs.push({ type: 9, name: resName("BAR_CODE_"), val: "123456789", color: "#000000", fontSize: 18, font: "Arial", show: false, black: false });//show是取消文字显示
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
});
|
|
}
|
|
function selectBarCode() {
|
|
//字段名
|
|
//background-color
|
|
//color
|
|
$("#barcode_controll").show();
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
$("#barcode_field_name").val(objs[idx - 1].name);
|
|
$("#barcode_font_family").val(objs[idx - 1].font);
|
|
let val = parseFloat(objs[idx - 1].fontSize)*72/dpi
|
|
if (val%0.5!==0) val = Math.round(val*2)/2
|
|
$("#barcode_size").val(val);
|
|
$("#barcode_val").val(objs[idx - 1].val);
|
|
$("#barcode_show").prop("checked", objs[idx - 1].show ? 'checked' : '');
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
}
|
|
function addCounter(pointer) {
|
|
let text = new fabric.Text('0', {
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fontSize: 100,
|
|
fill: "#000000",
|
|
});
|
|
canvas.add(text);
|
|
objs.push({ type: 10, name: resName("COUNTER_"), start: 0, add: 1, black: false });
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
console.log(canvas.getObjects())
|
|
}
|
|
function selectCounter() {
|
|
//起始
|
|
//终止
|
|
//增量
|
|
$("#counter_control").show();
|
|
|
|
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
$("#counter_start").val(objs[idx - 1].start);
|
|
$("#counter_add").val(objs[idx - 1].add);
|
|
$("#counter_color").val(canvas.getActiveObject().get("fill"));
|
|
$("#count_font_family").val(canvas.getActiveObject().get("fontFamily"));
|
|
let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
|
|
if (val%0.5!==0) val = Math.round(val*2)/2
|
|
$("#count_size").val(val);
|
|
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#set_bg").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
|
|
}
|
|
function getIndex(target, _canvas = null) {
|
|
let temp_objs;
|
|
if (_canvas == null) {
|
|
temp_objs = canvas.getObjects();
|
|
} else {
|
|
temp_objs = _canvas.getObjects();
|
|
}
|
|
|
|
let i = 0;
|
|
for (let res of temp_objs) {
|
|
if (target == res) {
|
|
return i;
|
|
}
|
|
i++;
|
|
}
|
|
return 0;
|
|
}
|
|
function getType(target) {
|
|
let temp_objs = canvas.getObjects();
|
|
let i = 0;
|
|
for (let res of temp_objs) {
|
|
if (target == res) {
|
|
return objs[i].type;
|
|
}
|
|
i++;
|
|
}
|
|
}
|
|
|
|
function updateList() {
|
|
let str = ""
|
|
let i = 0;
|
|
for (let item of objs) {
|
|
switch (item.type) {
|
|
case 1:/* 2022-06-14修改*/
|
|
str = "<div><img src=\"public/images/images.svg\" id='obj" + i + "'/>IMG_" + i + "</div>" + str;
|
|
break;
|
|
case 2:
|
|
str = "<div><img src=\"public/images/images_add.svg\" id='obj" + i + "'/>" + item.name + "</div>" + str;
|
|
break;
|
|
case 3:
|
|
str = "<div><img src=\"public/images/text.svg\" id='obj" + i + "'/>" + "TEXT_" + i + "</div>" + str;
|
|
break;
|
|
case 4:
|
|
str = "<div><img src=\"public/images/text2.svg\" id='obj" + i + "'/>" + item.name + "</div>" + str;
|
|
break;
|
|
case 5:
|
|
str = "<div><img src=\"public/images/rect.svg\" id='obj" + i + "'/>RECT_" + i + "</div>" + str;
|
|
break;
|
|
case 6:
|
|
str = "<div><img src=\"public/images/round.svg\" id='obj" + i + "'/>CIRCLE_" + i + "</div>" + str;
|
|
break;
|
|
case 7:
|
|
str = "<div><img src=\"public/images/line.svg\" id='obj" + i + "'/>LINE_" + i + "</div>" + str;
|
|
break;
|
|
case 8:
|
|
str = "<div><img src=\"public/images/qrcode.svg\" id='obj" + i + "'/>QRCODE_" + i + "</div>" + str;
|
|
break;
|
|
case 9:
|
|
str = "<div><img src=\"public/images/barcode.svg\" id='obj" + i + "'/>BARCODE_" + i + "</div>" + str;
|
|
break;
|
|
case 10:
|
|
str = "<div><img src=\"public/images/counter.svg\" id='obj" + i + "'/>COUNTER_" + i + "</div>" + str;
|
|
break;
|
|
case 11:
|
|
str = "<div><img src=\"public/images/text3.svg\" id='obj" + i + "'/>" + "CIRCLE_TEXT_" + i + "</div>" + str;
|
|
break;
|
|
}
|
|
i++;
|
|
}
|
|
$(".obj_list").html(str);
|
|
}
|
|
function selectObj(i, notSelect = false) {
|
|
//for(let item in $(".obj_list").children()){
|
|
// if(_i == i){
|
|
// item.css("background-color","#6F7A84");
|
|
// }else{
|
|
// item.css("background-color","");
|
|
// }
|
|
// _i++;
|
|
//}
|
|
$('.obj_list div').each(function (index) {
|
|
//if(index == i){
|
|
if ($(this).children("img").attr("id") == "obj" + i) {
|
|
$(this).css("background-color", "#6F7A84");
|
|
canvas.setActiveObject(canvas.getObjects()[i + 1]);
|
|
canvas.renderAll();
|
|
} else {
|
|
$(this).css("background-color", "");
|
|
}
|
|
});
|
|
if (!notSelect) {
|
|
handleObjectSelected();
|
|
}
|
|
|
|
}
|
|
function recordState() {
|
|
//pre_objs.push(JSON.stringify(objs));
|
|
//pre_json.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
//next_json = [];
|
|
//next_objs = [];
|
|
//recordObjs.push(JSON.stringify(objs));
|
|
//recordJson.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
++step.val;
|
|
for (let i = step.val; i < recordObjs.length; i++) {
|
|
recordObjs.pop();
|
|
recordJson.pop();
|
|
}
|
|
//recordObjs.splice(step.val, 1, JSON.stringify(objs))
|
|
//recordJson.splice(step.val, 1, canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]))
|
|
recordObjs.push(JSON.stringify(objs))
|
|
j = canvas.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
|
|
j.objects[0].hoverCursor = "default";
|
|
recordJson.push(j);
|
|
}
|
|
function getCoordsMinX(acoords) {
|
|
x = acoords[0].x;
|
|
for (let item of acoords) {
|
|
if (item.x < x) {
|
|
x = item.x
|
|
}
|
|
}
|
|
return x;
|
|
}
|
|
function getCoordsMaxX(acoords) {
|
|
x = acoords[0].x;
|
|
for (let item of acoords) {
|
|
if (item.x > x) {
|
|
x = item.x
|
|
}
|
|
}
|
|
return x;
|
|
|
|
}
|
|
function getCoordsMinY(acoords) {
|
|
y = acoords[0].y;
|
|
for (let item of acoords) {
|
|
if (item.y < y) {
|
|
y = item.y
|
|
}
|
|
}
|
|
return y;
|
|
|
|
}
|
|
function getCoordsMaxY(acoords) {
|
|
y = acoords[0].y;
|
|
for (let item of acoords) {
|
|
if (item.y > y) {
|
|
y = item.y
|
|
}
|
|
}
|
|
return y;
|
|
}
|
|
|
|
$("#text_y").bind('input propertychange', function () {
|
|
if ($("#text_y").val() == "") {
|
|
$("#text_y").val(0)
|
|
}
|
|
let val = background_image.top;
|
|
if ($("#text_y").val() != "") {
|
|
val = background_image.top + parseInt($("#text_y").val());
|
|
}
|
|
canvas.getActiveObject().set("top", val)
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#text_x").bind('input propertychange', function () {
|
|
if ($("#text_x").val() == "") {
|
|
$("#text_x").val(0)
|
|
}
|
|
let val = background_image.left;
|
|
if ($("#text_x").val() != "") {
|
|
val = background_image.left + parseInt($("#text_x").val());
|
|
}
|
|
canvas.getActiveObject().set("left", val)
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#text_w").bind('input propertychange', function () {
|
|
let val = "0";
|
|
if ($("#text_w").val() != "") {
|
|
val = $("#text_w").val();
|
|
}
|
|
let type = objs[getIndex(canvas.getActiveObject()) - 1].type;
|
|
if (type == 3 || type == 4) {
|
|
canvas.getActiveObject().set("width", parseInt(val))
|
|
} else {
|
|
canvas.getActiveObject().set("scaleX", parseInt(val) / canvas.getActiveObject().get("width"))
|
|
}
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#text_h").bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
if (objs[idx - 1].type == 7) {
|
|
if ($("#text_h").val() == "") {
|
|
$("#text_h").val(canvas.getActiveObject().get("strokeWidth"));
|
|
}
|
|
canvas.getActiveObject().set("strokeWidth", parseInt($("#text_h").val()));
|
|
canvas.renderAll();
|
|
return;
|
|
}
|
|
let val = "0";
|
|
if ($("#text_h").val() != "") {
|
|
val = $("#text_h").val();
|
|
}
|
|
let type = objs[getIndex(canvas.getActiveObject()) - 1].type;
|
|
if (type == 3 || type == 4) {
|
|
canvas.getActiveObject().set("height", parseInt(val))
|
|
} else {
|
|
canvas.getActiveObject().set("scaleY", parseInt(val) / canvas.getActiveObject().get("height"))
|
|
}
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#text_r").bind('input propertychange', function () {
|
|
|
|
if ($("#text_r").val() == "") {
|
|
$("#text_r").val("0")
|
|
}
|
|
$("#text_r").val(parseInt($("#text_r").val()) % 360)
|
|
//canvas.getActiveObject().set("rotate", val)
|
|
canvas.getActiveObject().rotate(parseInt($("#text_r").val()))
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#out_pic_field_name").bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
objs[idx - 1].name = $("#out_pic_field_name").val();
|
|
updateList();
|
|
recordState();
|
|
})
|
|
|
|
$("#text_black").click(function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
if ($(this).prop("checked")) {
|
|
objs[idx - 1].black = true;
|
|
} else {
|
|
objs[idx - 1].black = false;
|
|
}
|
|
recordState();
|
|
});
|
|
// $("#out_pic_black").click(function () {
|
|
// let idx = getIndex(canvas.getActiveObject());
|
|
// if ($(this).prop("checked")) {
|
|
// objs[idx-1].black = true;
|
|
// } else {
|
|
// objs[idx-1].black = false;
|
|
// }
|
|
// recordState();
|
|
// });
|
|
$("#out_text_field_name").bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
objs[idx - 1].name = $("#out_text_field_name").val();
|
|
updateList();
|
|
recordState();
|
|
})
|
|
$("#qrcode_field_name").bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
objs[idx - 1].name = $("#qrcode_field_name").val();
|
|
updateList();
|
|
recordState();
|
|
})
|
|
$("#qrcode_color").bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject();
|
|
let qr = jrQrcode.getQrBase64($("#qrcode_val").val(), { padding: 0, foreground: $(this).val() });
|
|
let idx = getIndex(item);
|
|
objs[idx - 1].color = $(this).val();
|
|
item.setSrc(qr, function (img) {
|
|
canvas.renderAll();
|
|
recordState();
|
|
});
|
|
});
|
|
$("#qrcode_val").bind('change', function () {
|
|
let val = $(this).val() ? $(this).val() : 'https://www.cardsoon.com'
|
|
let item = canvas.getActiveObject();
|
|
let qr = jrQrcode.getQrBase64(val, { padding: 0, foreground: $("#qrcode_color").val() });
|
|
let idx = getIndex(item);
|
|
objs[idx - 1].val = val;
|
|
item.setSrc(qr, function (img) {
|
|
canvas.renderAll();
|
|
recordState();
|
|
});
|
|
});
|
|
$("#barcode_color").bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject();
|
|
let idx = getIndex(item);
|
|
objs[idx - 1].color = $(this).val();
|
|
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
|
|
let barcode = document.getElementById('barcode');
|
|
let bar = barcode.toDataURL("image/png");
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll();
|
|
recordState();
|
|
});
|
|
});
|
|
$("#barcode_field_name").bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
objs[idx - 1].name = $("#barcode_field_name").val();
|
|
updateList();
|
|
recordState();
|
|
})
|
|
$("#text_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("fill", $("#text_color").val());
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#text_back_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("textBackgroundColor", $("#text_back_color").val());
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#text_size").bind('input propertychange', function () {
|
|
let val = 1
|
|
if (parseFloat($("#text_size").val())) {
|
|
val = parseFloat($("#text_size").val())
|
|
if (val < 1) {
|
|
val = 1
|
|
} else if (val > dpi) {
|
|
val = dpi
|
|
} else if (val%0.5!==0) {
|
|
val = Math.round(val*2)/2
|
|
}
|
|
|
|
}
|
|
$("#text_size").val(val)
|
|
canvas.getActiveObject().set("fontSize", val*dpi/72);
|
|
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
|
|
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#circle_text_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("fill", $("#circle_text_color").val());
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#circle_text_back_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("textBackgroundColor", $("#circle_text_back_color").val());
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#circle_text_text").bind('input propertychange', function () {
|
|
let val = $("#circle_text_text").val().trim()
|
|
canvas.getActiveObject().set("text", ` ${val} `);
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
})
|
|
$("#out_text_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("fill", $("#out_text_color").val());
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#out_text_back_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("textBackgroundColor", $("#out_text_back_color").val());
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#out_text_size").bind('input propertychange', function () {
|
|
let val = 1
|
|
if (parseFloat($("#out_text_size").val())) {
|
|
val = parseFloat($("#out_text_size").val())
|
|
if (val < 1) {
|
|
val = 1
|
|
} else if (val > dpi) {
|
|
val = dpi
|
|
} else if (val%0.5!==0) {
|
|
val = Math.round(val*2)/2
|
|
}
|
|
|
|
}
|
|
$("#out_text_size").val(val)
|
|
canvas.getActiveObject().set("fontSize", val*dpi/72);
|
|
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
|
|
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#out_text_text").bind('input propertychange', function () {
|
|
let val = $("#out_text_text").val().trim()
|
|
canvas.getActiveObject().set("text", ` ${val} `);
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
})
|
|
$("#rect_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("fill", $("#rect_color").val());
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#rect_stroke").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("stroke", $("#rect_stroke").val());
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#rect_stroke_width").bind('input propertychange', function () {
|
|
if ($("#rect_stroke_width").val() == "") {
|
|
$("#rect_stroke_width").val("0")
|
|
} else {
|
|
$("#rect_stroke_width").val(parseInt($("#rect_stroke_width").val()))
|
|
}
|
|
canvas.getActiveObject().set("strokeWidth", parseInt($("#rect_stroke_width").val()));
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#rect_radius").bind('input propertychange', function () {
|
|
if ($("#rect_radius").val() == "") {
|
|
$("#rect_radius").val("0")
|
|
} else {
|
|
$("#rect_radius").val(parseInt($("#rect_radius").val()))
|
|
}
|
|
canvas.getActiveObject().set("rx", parseInt($("#rect_radius").val()));
|
|
canvas.getActiveObject().set("ry", parseInt($("#rect_radius").val()));
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#circle_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("fill", $("#circle_color").val());
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#circle_stroke").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("stroke", $("#circle_stroke").val());
|
|
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#circle_stroke_width").bind('input propertychange', function () {
|
|
if ($("#circle_stroke_width").val() == "") {
|
|
$("#circle_stroke_width").val("0")
|
|
} else {
|
|
$(this).val(parseInt($(this).val()))
|
|
}
|
|
canvas.getActiveObject().set("strokeWidth", parseInt($("#circle_stroke_width").val()));
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#counter_start").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("text", $("#counter_start").val());
|
|
let item = canvas.getActiveObject();
|
|
let idx = getIndex(item);
|
|
objs[idx - 1].start = $(this).val();
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#counter_add").bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject();
|
|
let idx = getIndex(item);
|
|
objs[idx - 1].add = $(this).val();
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#counter_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("fill", $("#counter_color").val());
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#count_size").bind('input propertychange', function () {
|
|
let val = 1
|
|
if (parseFloat($("#count_size").val())) {
|
|
val = parseFloat($("#count_size").val())
|
|
if (val < 1) {
|
|
val = 1
|
|
} else if (val > dpi) {
|
|
val = dpi
|
|
} else if (val%0.5!==0) {
|
|
val = Math.round(val*2)/2
|
|
}
|
|
|
|
}
|
|
$("#count_size").val(val)
|
|
canvas.getActiveObject().set("fontSize", val*dpi/72);
|
|
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
|
|
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#line_color").bind('input propertychange', function () {
|
|
canvas.getActiveObject().set("stroke", $("#line_color").val());
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#line_dist").bind('input propertychange', function () {
|
|
if ($("#line_dist").val() == "") {
|
|
$("#line_dist").val(0)
|
|
}
|
|
canvas.getActiveObject().set("strokeDashArray", [parseInt($("#line_dist").val()), parseInt($("#line_dist").val())])
|
|
canvas.renderAll();
|
|
recordState();
|
|
})
|
|
$("#text_text").bind('input propertychange', function () {
|
|
let val = $("#text_text").val().trim()
|
|
canvas.getActiveObject().set("text", ` ${val} `);
|
|
canvas.renderAll();
|
|
updateList();
|
|
recordState();
|
|
})
|
|
$("#barcode_val").bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject();
|
|
let idx = getIndex(item);
|
|
objs[idx - 1].val = $(this).val();
|
|
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
|
|
|
|
let barcode = document.getElementById('barcode');
|
|
let bar = barcode.toDataURL("image/png");
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll();
|
|
recordState();
|
|
});
|
|
})
|
|
$("#barcode_show").click(function () {
|
|
let item = canvas.getActiveObject();
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
let val = $("#barcode_size").val()
|
|
if ($(this).prop("checked")) {
|
|
objs[idx - 1].show = true;
|
|
val = 0
|
|
} else {
|
|
objs[idx - 1].show = false;
|
|
}
|
|
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: val*dpi/72, font: objs[idx - 1].font });
|
|
let barcode = document.getElementById('barcode');
|
|
let bar = barcode.toDataURL("image/png");
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll();
|
|
recordState();
|
|
});
|
|
});
|
|
$("#barcode_size").bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject();
|
|
let idx = getIndex(item);
|
|
let val = 1
|
|
if (parseFloat($(this).val())) {
|
|
val = parseFloat($(this).val())
|
|
if (val < 1) {
|
|
val = 1
|
|
} else if (val > dpi) {
|
|
val = dpi
|
|
} else if (val%0.5!==0) {
|
|
val = Math.round(val*2)/2
|
|
}
|
|
|
|
}
|
|
$("#barcode_size").val(val)
|
|
objs[idx - 1].fontSize = val*dpi/72;
|
|
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
|
|
|
|
let barcode = document.getElementById('barcode');
|
|
let bar = barcode.toDataURL("image/png");
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll();
|
|
recordState();
|
|
});
|
|
})
|
|
$('#count_font_family').on('change', function () {
|
|
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
|
|
canvas.renderAll()
|
|
recordState();
|
|
});
|
|
$('#text_font_family').on('change', function () {
|
|
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
|
|
canvas.renderAll()
|
|
recordState();
|
|
});
|
|
|
|
$('#circle_text_font_family').on('change', function () {
|
|
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
|
|
canvas.renderAll()
|
|
recordState();
|
|
});
|
|
|
|
$('#language_select').on('change', function () {//语言选择
|
|
langua_ge($(this).find('option:selected').val());
|
|
s_lan = $(this).find('option:selected').val();
|
|
localStorage.setItem("lang", s_lan);
|
|
});
|
|
$('#barcode_font_family').on('change', function () {
|
|
let item = canvas.getActiveObject();
|
|
let idx = getIndex(item);
|
|
objs[idx - 1].font = $(this).find('option:selected').text();
|
|
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
|
|
|
|
let barcode = document.getElementById('barcode');
|
|
let bar = barcode.toDataURL("image/png");
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll();
|
|
recordState();
|
|
});
|
|
//recordState();
|
|
});
|
|
$('#out_text_font_family').on('change', function () {
|
|
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
|
|
canvas.renderAll()
|
|
recordState();
|
|
});
|
|
$(".obj_list").on("click", "div", function () {
|
|
let idx = objs.length - 1 - $(this).index();
|
|
selectObj(idx);
|
|
});
|
|
$("#exceed").click(function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
if ($(this).prop("checked")) {
|
|
objs[idx - 1].exceed = true;
|
|
} else {
|
|
objs[idx - 1].exceed = false;
|
|
}
|
|
recordState();
|
|
});
|
|
$("#autoWrap").click(function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
if ($(this).prop("checked")) {
|
|
|
|
objs[idx - 1].autoWrap = true;
|
|
} else {
|
|
objs[idx - 1].autoWrap = false;
|
|
}
|
|
recordState();
|
|
});
|
|
$("#fixSize").click(function () {
|
|
let idx = getIndex(canvas.getActiveObject());
|
|
if ($(this).prop("checked")) {
|
|
|
|
objs[idx - 1].fixSize = true;
|
|
} else {
|
|
objs[idx - 1].fixSize = false;
|
|
}
|
|
recordState();
|
|
});
|
|
$("#delete").click(function () {
|
|
let actObjs = canvas.getActiveObjects();
|
|
let allObjs = canvas.getObjects();
|
|
let flag = 0;
|
|
for (let item of actObjs) {
|
|
if (item != allObjs[0]) {
|
|
let i = getIndex(item);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
|
|
objs.splice(i - 1, 1);
|
|
canvas.remove(item);
|
|
flag = 1;
|
|
|
|
}
|
|
}
|
|
updateList();
|
|
canvas.discardActiveObject();
|
|
if (flag == 1) {
|
|
recordState();
|
|
canvas.renderAll();
|
|
}
|
|
// let actObjs = canvas.getActiveObjects();
|
|
// let allObjs = canvas.getObjects();
|
|
// let flag = 0;
|
|
// for( let item of actObjs){
|
|
// if ( item != allObjs[0]){
|
|
// let i = getIndex(item);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
|
|
// objs.splice(i-1,1);
|
|
// canvas.remove(item);
|
|
// flag = 1;
|
|
// updateList();
|
|
// }
|
|
// }
|
|
// selectObj(-1);
|
|
// if(flag == 1){
|
|
// recordState();
|
|
// }
|
|
});
|
|
$("#about").click(function () {
|
|
layer.open({
|
|
type: 1
|
|
, title: language_str("about") //不显示标题栏 "关于Soon Design"
|
|
, area: '450px;'
|
|
, id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
, moveType: 1 //拖拽模式，0或者1
|
|
, content: '<div style="padding-top:20px;padding-bottom:30px;background-color: #32363A; color: #fff; font-weight: 300;text-align:center;"><div style="width: 120px;margin: 0 auto;"><img style="width: 120px;" src="./public/images/IconA.png"></div><div style="font-size:24px;">Soon Design</div><div style="font-size:14px;">' + language_str("vers") + ' 2.1.2</div><div style="font-size:14px;">' + language_str("copyright") + '</div></div>'
|
|
});
|
|
})
|
|
$("#help").click(function () {
|
|
ipcRenderer.send('open-help-file');
|
|
})
|
|
function handleObjectSelected() {
|
|
let select_obj = canvas.getActiveObject();
|
|
if (!select_obj) {
|
|
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#component_type").text(language_str("bg"));//comfirm
|
|
return;
|
|
}
|
|
let i = getIndex(select_obj);
|
|
if (i != 0) {
|
|
//不是背景
|
|
//console.log(objs);
|
|
--i;
|
|
switch (objs[i].type) {
|
|
case 1:
|
|
//console.log("图片");
|
|
$("#component_type").text(language_str("img"));//"图片"
|
|
selectObject(select_obj, i);
|
|
selectPic(select_obj, i);
|
|
break;
|
|
case 2:
|
|
//console.log("预留图片");
|
|
|
|
$("#component_type").text(language_str("simg"));//"合成图片"
|
|
selectObject(select_obj, i);
|
|
selectOutPic(select_obj, i);
|
|
break;
|
|
case 3:
|
|
|
|
$("#component_type").text(language_str("text"));//"文字"
|
|
//console.log("文字");
|
|
selectObject(select_obj, i);
|
|
selectText(select_obj, i);
|
|
break;
|
|
case 4:
|
|
//console.log("标签");
|
|
|
|
$("#component_type").text(language_str("stext"));//"合成文字"
|
|
selectObject(select_obj, i);
|
|
selectOutText(select_obj, i);
|
|
break;
|
|
case 5:
|
|
//console.log("矩形");
|
|
|
|
$("#component_type").text(language_str("rect"));//"矩形"
|
|
selectObject(select_obj, i);
|
|
selectRect(select_obj, i);
|
|
break;
|
|
case 6:
|
|
//console.log("圆形");
|
|
|
|
$("#component_type").text(language_str("circ"));//"圆形"
|
|
selectObject(select_obj, i);
|
|
selectCircle(select_obj, i);
|
|
break;
|
|
case 7:
|
|
//console.log("直线");
|
|
|
|
$("#component_type").text(language_str("line"));//"直线"
|
|
selectObject(select_obj, i);
|
|
selectLine(select_obj, i);
|
|
break;
|
|
case 8:
|
|
//console.log("二维码");
|
|
|
|
$("#component_type").text(language_str("qrc"));//"二维码"
|
|
selectObject(select_obj, i);
|
|
selectQrCode(select_obj, i);
|
|
break;
|
|
case 9:
|
|
//console.log("条形码");
|
|
|
|
$("#component_type").text(language_str("barc"));//"条形码"
|
|
selectObject(select_obj, i);
|
|
selectBarCode(select_obj, i);
|
|
break;
|
|
case 10:
|
|
//console.log("计数器");
|
|
|
|
$("#component_type").text(language_str("counter"));//"计数器"
|
|
selectObject(select_obj, i);
|
|
selectCounter(select_obj, i);
|
|
break;
|
|
case 11:
|
|
|
|
$("#component_type").text(language_str("ctext"));//"圆形文字"
|
|
//console.log("圆形文字");
|
|
selectObject(select_obj, i);
|
|
selectCircleText(select_obj, i);
|
|
break;
|
|
}
|
|
} else {
|
|
//背景，收起对象属性
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#component_type").text(language_str('bg'));
|
|
|
|
}
|
|
}
|
|
|
|
canvas1.on("mouse:move", (e) => {
|
|
let width = canvas.getWidth();
|
|
let height = canvas.getHeight();
|
|
$("#posText").text("X: " + (e.pointer.x).toFixed(0) + " Y: " + (e.pointer.y).toFixed(0));
|
|
});
|
|
canvas1.on("object:moving", function (e) {
|
|
let obj = canvas.getActiveObject()
|
|
if (objs[getIndex(e.target) - 1].type ===11) {
|
|
let pointer = {
|
|
x: obj.left,
|
|
y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2
|
|
}
|
|
console.log(obj)
|
|
let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
|
|
let angleDeg = getDeg(pointer)
|
|
let flipped = pointer.y > canvas.height/2 ? true : false
|
|
obj.set("diameter", distance*2);
|
|
obj.set("angle", angleDeg);
|
|
obj.set("flipped", flipped);
|
|
// canvas.renderAll();
|
|
}
|
|
updateControls();
|
|
});
|
|
canvas1.on("object:scaling", function (event) {
|
|
//if(objs[getIndex(event.target) - 1].type == 5 || objs[getIndex(event.target) - 1].type == 6){
|
|
// //canvas.getActiveObject().set("width", canvas.getActiveObject().get("width") * canvas.getActiveObject().get("scaleX"));
|
|
// //canvas.getActiveObject().set("height", canvas.getActiveObject().get("height") * canvas.getActiveObject().get("scaleY"));
|
|
// //canvas.getActiveObject().set("scaleX", 1);
|
|
// //canvas.getActiveObject().set("scaleY", 1);
|
|
// //console.log(canvas.getActiveObject().get("scaleX"));
|
|
// //canvas1.discardActiveObject();
|
|
// //canvas1.setActiveObject(event.target);
|
|
// //canvas1.renderAll();
|
|
// //updateControls();
|
|
//}
|
|
});
|
|
canvas1.on("object:rotating", function (e) {
|
|
updateControls();
|
|
});
|
|
canvas1.on("object:rotated", function (e) {
|
|
console.log("object:rotated");
|
|
recordState();
|
|
});
|
|
canvas1.on("object:added", function (e) {
|
|
//console.log("object:added");
|
|
//recordState();
|
|
////console.log(objs);
|
|
});
|
|
canvas1.on('mouse:down', (e) => {
|
|
//单选
|
|
let select_obj = canvas.getActiveObject();
|
|
let i = getIndex(select_obj);
|
|
if (i != 0) {
|
|
//不是背景
|
|
//console.log(objs);
|
|
--i;
|
|
switch (objs[i].type) {
|
|
case 1:
|
|
//console.log("图片");
|
|
$("#component_type").text(language_str("img"));//"图片"
|
|
selectObject(select_obj, i);
|
|
selectPic(select_obj, i);
|
|
break;
|
|
case 2:
|
|
//console.log("预留图片");
|
|
|
|
$("#component_type").text(language_str("simg"));//"合成图片"
|
|
selectObject(select_obj, i);
|
|
selectOutPic(select_obj, i);
|
|
break;
|
|
case 3:
|
|
|
|
$("#component_type").text(language_str("text"));//"文字"
|
|
//console.log("文字");
|
|
selectObject(select_obj, i);
|
|
selectText(select_obj, i);
|
|
break;
|
|
case 4:
|
|
//console.log("标签");
|
|
|
|
$("#component_type").text(language_str("stext"));//"合成文字"
|
|
selectObject(select_obj, i);
|
|
selectOutText(select_obj, i);
|
|
break;
|
|
case 5:
|
|
//console.log("矩形");
|
|
|
|
$("#component_type").text(language_str("rect"));//"矩形"
|
|
selectObject(select_obj, i);
|
|
selectRect(select_obj, i);
|
|
break;
|
|
case 6:
|
|
//console.log("圆形");
|
|
|
|
$("#component_type").text(language_str("circ"));//"圆形"
|
|
selectObject(select_obj, i);
|
|
selectCircle(select_obj, i);
|
|
break;
|
|
case 7:
|
|
//console.log("直线");
|
|
|
|
$("#component_type").text(language_str("line"));//"直线"
|
|
selectObject(select_obj, i);
|
|
selectLine(select_obj, i);
|
|
break;
|
|
case 8:
|
|
//console.log("二维码");
|
|
|
|
$("#component_type").text(language_str("qrc"));//"二维码"
|
|
selectObject(select_obj, i);
|
|
selectQrCode(select_obj, i);
|
|
break;
|
|
case 9:
|
|
//console.log("条形码");
|
|
|
|
$("#component_type").text(language_str("barc"));//"条形码"
|
|
selectObject(select_obj, i);
|
|
selectBarCode(select_obj, i);
|
|
break;
|
|
case 10:
|
|
//console.log("计数器");
|
|
|
|
$("#component_type").text(language_str("counter"));//"计数器"
|
|
selectObject(select_obj, i);
|
|
selectCounter(select_obj, i);
|
|
break;
|
|
case 11:
|
|
|
|
$("#component_type").text(language_str("ctext"));//"圆形文字"
|
|
//console.log("圆形文字");
|
|
selectObject(select_obj, i);
|
|
selectCircleText(select_obj, i);
|
|
break;
|
|
}
|
|
selectObj(i, true);//如果是点击画布中，则相应列表
|
|
} else {
|
|
//背景，收起对象属性
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#counter_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
selectObj(-1);
|
|
$("#component_type").text(language_str("bg"));
|
|
|
|
}
|
|
});
|
|
canvas1.on('text:editing:entered', function () {
|
|
_textEdit = true;
|
|
})
|
|
canvas1.on('text:editing:exited', function () {
|
|
_textEdit = false;
|
|
})
|
|
canvas1.on('object:modified', function (event) {
|
|
if (canvas1.getActiveObjects().length > 1) {
|
|
return;
|
|
}
|
|
if (objs[getIndex(event.target) - 1].type == 3) {
|
|
|
|
event.target.fontSize *= event.target.scaleX;
|
|
event.target.fontSize = event.target.fontSize.toFixed(0);
|
|
event.target.scaleX = 1;
|
|
event.target.scaleY = 1;
|
|
event.target._clearCache();
|
|
// $("#text_size").val(event.target.fontSize);
|
|
canvas1.renderAll();
|
|
updateControls();
|
|
} else if (objs[getIndex(event.target) - 1].type == 4) {
|
|
event.target.fontSize *= event.target.scaleX;
|
|
event.target.fontSize = event.target.fontSize.toFixed(0);
|
|
event.target.scaleX = 1;
|
|
event.target.scaleY = 1;
|
|
event.target._clearCache();
|
|
// $("#out_text_size").val(event.target.fontSize);
|
|
canvas1.renderAll();
|
|
} else if (objs[getIndex(event.target) - 1].type == 10) {
|
|
event.target.fontSize *= event.target.scaleX;
|
|
event.target.fontSize = event.target.fontSize.toFixed(0);
|
|
event.target.scaleX = 1;
|
|
event.target.scaleY = 1;
|
|
event.target._clearCache();
|
|
// $("#count_size").val(event.target.fontSize);
|
|
canvas1.renderAll();
|
|
} else if (objs[getIndex(event.target) - 1].type == 5) {
|
|
canvas1.getActiveObject().set("width", canvas1.getActiveObject().get("width") * canvas1.getActiveObject().get("scaleX"));
|
|
canvas1.getActiveObject().set("height", canvas1.getActiveObject().get("height") * canvas1.getActiveObject().get("scaleY"));
|
|
canvas1.getActiveObject().set("scaleX", 1);
|
|
canvas1.getActiveObject().set("scaleY", 1);
|
|
updateControls();
|
|
}
|
|
recordState();
|
|
});
|
|
canvas1.on("mouse:up", (e) => {
|
|
//HERE
|
|
switch (addState) {
|
|
case 1:
|
|
addPic(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addPic").css("background-color", "");
|
|
break;
|
|
case 2:
|
|
addOutPic(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addOutPic").css("background-color", "");
|
|
break;
|
|
case 3:
|
|
addText(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addText").css("background-color", "");
|
|
break;
|
|
case 4:
|
|
addOutText(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addOutText").css("background-color", "");
|
|
break;
|
|
case 5:
|
|
addRect(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addRect").css("background-color", "");
|
|
break;
|
|
case 6:
|
|
addCircle(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addCircle").css("background-color", "");
|
|
break;
|
|
case 7:
|
|
addLine(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addLine").css("background-color", "");
|
|
break;
|
|
case 8:
|
|
addQrCode(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addQrCode").css("background-color", "");
|
|
break;
|
|
case 9:
|
|
addBarCode(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addBarCode").css("background-color", "");
|
|
break;
|
|
case 10:
|
|
addCounter(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
$("#addCounter").css("background-color", "");
|
|
break;
|
|
case 11:
|
|
addCircleText(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas1.renderAll();
|
|
$("#addCircleText").css("background-color", "");
|
|
break;
|
|
}
|
|
});
|
|
canvas1.on("text:changed", (e) => {
|
|
$("#text_text").val(e.target.get("text"));
|
|
});
|
|
canvas1.on('after:render', function () {
|
|
if (is_bgi_add) {
|
|
var image = document.getElementById('source_front');
|
|
ctx1.drawImage(image, ($("#canvas1").width() - 2787) / 2, ($("#canvas1").height() - 2787) / 2, 2787, 2787);
|
|
}
|
|
});
|
|
canvas2.on('text:editing:entered', function () {
|
|
_textEdit = true;
|
|
})
|
|
canvas2.on('text:editing:exited', function () {
|
|
_textEdit = false;
|
|
})
|
|
canvas2.on('after:render', function () {
|
|
if (is_bgi_add) {
|
|
var image = document.getElementById('source_back');
|
|
ctx2.drawImage(image, 0, 0, 2787, 2787);
|
|
}
|
|
});
|
|
canvas2.on("mouse:move", (e) => {
|
|
$("#posText").text("X: " + (e.pointer.x - background_image.left).toFixed(0) + " Y: " + (e.pointer.y - background_image.top).toFixed(0));
|
|
});
|
|
canvas2.on("object:moving", function (e) {
|
|
updateControls();
|
|
});
|
|
canvas2.on("object:scaling", function (e) {
|
|
updateControls();
|
|
});
|
|
canvas2.on("object:rotating", function (e) {
|
|
updateControls();
|
|
});
|
|
canvas2.on("object:rotated", function (e) {
|
|
console.log("object:rotated");
|
|
recordState();
|
|
});
|
|
canvas2.on("object:added", function (e) {
|
|
//console.log("object:added");
|
|
//recordState();
|
|
////console.log(objs);
|
|
});
|
|
canvas2.on('mouse:down', (e) => {
|
|
//单选
|
|
let select_obj = canvas.getActiveObject();
|
|
let i = getIndex(select_obj);
|
|
if (i != 0) {
|
|
//不是背景
|
|
//console.log(objs);
|
|
--i;
|
|
switch (objs[i].type) {
|
|
case 1:
|
|
//console.log("图片");
|
|
$("#component_type").text(language_str("img"));//"图片"
|
|
selectObject(select_obj, i);
|
|
selectPic(select_obj, i);
|
|
break;
|
|
case 2:
|
|
//console.log("预留图片");
|
|
|
|
$("#component_type").text(language_str("simg"));//"合成图片"
|
|
selectObject(select_obj, i);
|
|
selectOutPic(select_obj, i);
|
|
break;
|
|
case 3:
|
|
|
|
$("#component_type").text(language_str("text"));//"文字"
|
|
//console.log("文字");
|
|
selectObject(select_obj, i);
|
|
selectText(select_obj, i);
|
|
break;
|
|
case 4:
|
|
//console.log("标签");
|
|
|
|
$("#component_type").text(language_str("stext"));//"合成文字"
|
|
selectObject(select_obj, i);
|
|
selectOutText(select_obj, i);
|
|
break;
|
|
case 5:
|
|
//console.log("矩形");
|
|
|
|
$("#component_type").text(language_str("rect"));//"矩形"
|
|
selectObject(select_obj, i);
|
|
selectRect(select_obj, i);
|
|
break;
|
|
case 6:
|
|
//console.log("圆形");
|
|
|
|
$("#component_type").text(language_str("circ"));//"圆形"
|
|
selectObject(select_obj, i);
|
|
selectCircle(select_obj, i);
|
|
break;
|
|
case 7:
|
|
//console.log("直线");
|
|
|
|
$("#component_type").text(language_str("line"));//"直线"
|
|
selectObject(select_obj, i);
|
|
selectLine(select_obj, i);
|
|
break;
|
|
case 8:
|
|
//console.log("二维码");
|
|
|
|
$("#component_type").text(language_str("qrc"));//"二维码"
|
|
selectObject(select_obj, i);
|
|
selectQrCode(select_obj, i);
|
|
break;
|
|
case 9:
|
|
//console.log("条形码");
|
|
|
|
$("#component_type").text(language_str("barc"));//"条形码"
|
|
selectObject(select_obj, i);
|
|
selectBarCode(select_obj, i);
|
|
break;
|
|
case 10:
|
|
//console.log("计数器");
|
|
|
|
$("#component_type").text(language_str("counter"));//"计数器"
|
|
selectObject(select_obj, i);
|
|
selectCounter(select_obj, i);
|
|
break;
|
|
case 11:
|
|
|
|
$("#component_type").text(language_str("ctext"));//"圆形文字"
|
|
//console.log("圆形文字");
|
|
selectObject(select_obj, i);
|
|
selectCircleText(select_obj, i);
|
|
break;
|
|
}
|
|
selectObj(i, true);//如果是点击画布中，则相应列表
|
|
} else {
|
|
//背景，收起对象属性
|
|
$("#base_control").hide();
|
|
$("#line_control").hide();
|
|
$("#pic_control").hide();
|
|
$("#out_pic_control").hide();
|
|
$("#text_control").hide();
|
|
$("#circle_text_control").hide();
|
|
$("#out_text_control").hide();
|
|
$("#rect_control").hide();
|
|
$("#circle_control").hide();
|
|
$("#qrcode_Controll").hide();
|
|
$("#barcode_controll").hide();
|
|
$("#counter_control").hide();
|
|
selectObj(-1);
|
|
$("#component_type").text(language_str("bg"));
|
|
|
|
}
|
|
});
|
|
canvas2.on('object:modified', function (event) {
|
|
if (canvas.getActiveObjects().length > 1) {
|
|
return;
|
|
}
|
|
if (objs[getIndex(event.target) - 1].type == 3) {
|
|
event.target.fontSize *= event.target.scaleX;
|
|
event.target.fontSize = event.target.fontSize.toFixed(0);
|
|
event.target.scaleX = 1;
|
|
event.target.scaleY = 1;
|
|
event.target._clearCache();
|
|
$("#text_size").val(event.target.fontSize);
|
|
canvas2.renderAll();
|
|
} else if (objs[getIndex(event.target) - 1].type == 4) {
|
|
event.target.fontSize *= event.target.scaleX;
|
|
event.target.fontSize = event.target.fontSize.toFixed(0);
|
|
event.target.scaleX = 1;
|
|
event.target.scaleY = 1;
|
|
event.target._clearCache();
|
|
$("#out_text_size").val(event.target.fontSize);
|
|
canvas2.renderAll();
|
|
} else if (objs[getIndex(event.target) - 1].type == 10) {
|
|
event.target.fontSize *= event.target.scaleX;
|
|
event.target.fontSize = event.target.fontSize.toFixed(0);
|
|
event.target.scaleX = 1;
|
|
event.target.scaleY = 1;
|
|
event.target._clearCache();
|
|
$("#count_size").val(event.target.fontSize);
|
|
canvas2.renderAll();
|
|
} else if (objs[getIndex(event.target) - 1].type == 5) {
|
|
canvas2.getActiveObject().set("width", canvas2.getActiveObject().get("width") * canvas2.getActiveObject().get("scaleX"));
|
|
canvas2.getActiveObject().set("height", canvas2.getActiveObject().get("height") * canvas2.getActiveObject().get("scaleY"));
|
|
canvas2.getActiveObject().set("scaleX", 1);
|
|
canvas2.getActiveObject().set("scaleY", 1);
|
|
updateControls();
|
|
}
|
|
console.log("object:modified");
|
|
recordState();
|
|
});
|
|
canvas2.on("mouse:up", (e) => {
|
|
//HERE
|
|
switch (addState) {
|
|
case 1:
|
|
addPic(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addPic").css("background-color", "");
|
|
break;
|
|
case 2:
|
|
addOutPic(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addOutPic").css("background-color", "");
|
|
break;
|
|
case 3:
|
|
addText(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addText").css("background-color", "");
|
|
break;
|
|
case 4:
|
|
addOutText(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addOutText").css("background-color", "");
|
|
break;
|
|
case 5:
|
|
addRect(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addRect").css("background-color", "");
|
|
break;
|
|
case 6:
|
|
addCircle(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addCircle").css("background-color", "");
|
|
break;
|
|
case 7:
|
|
addLine(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addLine").css("background-color", "");
|
|
break;
|
|
case 8:
|
|
addQrCode(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addQrCode").css("background-color", "");
|
|
break;
|
|
case 9:
|
|
addBarCode(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addBarCode").css("background-color", "");
|
|
break;
|
|
case 10:
|
|
addCounter(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addCounter").css("background-color", "");
|
|
break;
|
|
case 11:
|
|
addCircleText(e.pointer);
|
|
addState = 0;
|
|
background_image.hoverCursor = "default";
|
|
canvas2.renderAll();
|
|
$("#addCircleText").css("background-color", "");
|
|
break;
|
|
}
|
|
});
|
|
|
|
var circle_text_size = slider.render({
|
|
elem: '#circle_text_size',
|
|
min: 10,
|
|
max: 120
|
|
, change: function (value) {
|
|
canvas.getActiveObject().set("fontSize", value);
|
|
canvas.renderAll();
|
|
}
|
|
});
|
|
var circle_text_diameter = slider.render({
|
|
elem: '#circle_text_diameter',
|
|
min: 500,
|
|
max: 4000
|
|
, change: function (value) {
|
|
canvas.getActiveObject().set("diameter", value);
|
|
canvas.renderAll();
|
|
}
|
|
});
|
|
var out_pic_op = slider.render({
|
|
elem: '#out_pic_op',
|
|
change: function (value) {
|
|
console.log(value)
|
|
console.log(canvas.getActiveObject())
|
|
canvas.getActiveObject().set('opacity', (100 - value) / 100)
|
|
canvas.renderAll()
|
|
}
|
|
})
|
|
var pic_op = slider.render({
|
|
elem: '#pic_op'
|
|
, change: function (value) {
|
|
canvas.getActiveObject().set("opacity", (100 - value) / 100);
|
|
canvas.renderAll();
|
|
}
|
|
});
|
|
var rect_op = slider.render({
|
|
elem: '#rect_op'
|
|
, change: function (value) {
|
|
canvas.getActiveObject().set("opacity", (100 - value) / 100);
|
|
canvas.renderAll();
|
|
}
|
|
});
|
|
var circle_op = slider.render({
|
|
elem: '#circle_op'
|
|
, change: function (value) {
|
|
canvas.getActiveObject().set("opacity", (100 - value) / 100);
|
|
canvas.renderAll();
|
|
}
|
|
});
|
|
})
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |