![文章2.png](/static/img/6408dc362890eb384cb9edafcfb985e0.%C3%A6%C2%96%C2%87%C3%A7%C2%AB%C2%A02.webp)

没事写点文章📝总结下代码，插入一些Emoji表情显得没那么无聊😏，

但是随手插入还是不方便🙅‍♂️，微软自带的检索很难匹配到🔍，gpt倒是能给我推荐一些，但是每次都要打开网页问，

我一直装着[Pot翻译](https://gitee.com/mirrors/Pot?_from=gitee_search#/mirrors/Pot/blob/master/README_EN.md)，

类似的有好多，这样的，选中文字，快捷键就可以出来



![34440c6051ad6f3bdec2d1fb52a487965d00e530.webp](/static/img/2a81e8bc9cbbb269d3cd6a08d01c2532.34440c6051ad6f3bdec2d1fb52a487965d00e530.webp)

而且还支持 openai自定义，所以就写了一个Emoji表情助手📚

这样配置

![4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp](/static/img/e2b81dd0da4a8309872025769af4e1be.4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp)
图片
图片800×600 41.9 KB

密钥自己写

图片

![5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp](/static/img/11c50c111a5f94e48cde0fe34ecbb2a7.5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp)
效果如下
图片

![c7386e73f153d77b8765216741f48d034734e0f1.png](/static/img/7c2f6a09372527e6d6cb4f8e96ab462d.c7386e73f153d77b8765216741f48d034734e0f1.webp)

写可以加上 “只输出一个最匹配的Emoji表情即可，不要输出其他内容” 的字样，这样就可以直接复制📋了

Pot翻译增加Emoji表情”翻译” 

![我的画板 by fabritor.png](/static/img/71cda4c275ee1308bd02b3721a04a374.%C3%A6%C2%88%C2%91%C3%A7%C2%9A%C2%84%C3%A7%C2%94%C2%BB%C3%A6%C2%9D%C2%BF%20by%20fabritor.webp)
# 1. 引出问题🤔

在写一个父子页面交互的事件时遇到了一个问题，环境是`FineUICore`，子页面用`window`的`IFrame`，在window执行保存后，需要执行父页面的赋值方法；

比如 `F.ui.tbxProvince.setValue('结果');`,这里直接写的js，其实在后台是 `UIHelper.TextBox("tbxProvince").Text(province);` 这两个效果是一样的

但是在子页面直接执行 `F.ui.tbxProvince` 是找不到😕的，子页面没这个控件，所以要在父页面调用，可以这样写



``` javascript
F.getActiveWindow().window.F.ui.tbxProvince.setValue('结果');
```

`F.getActiveWindow().window`就是激活这个窗口的window对象，

在后台我将 `F.ui.tbxProvince.setValue('结果');` 封装为一个方法，比如 `SetText`

``` c#
public async Task SetText(string value)
{
    var script = $"F.ui['tbxProvince'].setText('{value}');";
    PageContext.RegisterStartupScript(script);
}
```

如果加上 `F.getActiveWindow().window`  就要重写📝 ，或给 `SetText`增加参数，比如👇
``` c#
public async Task WindowSetText(string value)
{
    var script = $"F.getActiveWindow().window.F.ui['tbxProvince'].setText('{value}');";
    PageContext.RegisterStartupScript(script);
}
```

在调用时，
``` c#
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Window1_Close()
{
    await WindowSetText('结果');
    return UIHelper.Result();
}
```

这里我认为 `SetText` 和 `WindowSetText` 是干的一件事：`setText`，只不过作用域（作用域这个词可能不准确）不一样，同一件事写两个地方，维护是不方便的；同样如果给 `SetText`增加一个参数来定义作用域也不好，这个样`SetText`对外也是破坏性的

# 2. 另一种思路💡

既然作用域不一样，那我就声明一个`作用域`，让`SetText`判断当前在哪个`作用域`下，从而执行不一样的行为；

比如我想写成这样👇

``` c#
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Window1_Close()
{
    //告诉内部的代码生成js时应该加上 F.getActiveWindow().window.
    await ActiveWindow(async () =>
    {
        SetText(province);
    });
    return UIHelper.Result();
}
```

`SetText` 中如何得到 `ActiveWindow` 从而判断呢，这个我倒是经常用✅ 直接让GPT优化了下
``` c#
public bool IsMethodActiveWindowCalledInCallStack()
{
    StackTrace stackTrace = new StackTrace();
    StackFrame[] stackFrames = stackTrace.GetFrames();
    
    //这里要遍历向上找，因为异步
    return stackFrames?.Any(frame => frame.GetMethod()?.Name.Contains("ActiveWindow") ?? false) ?? false;
}
```
`SetText`写成这样
``` c#
 public async Task SetText(string value)
 {
     var top = IsMethodActiveWindowCalledInCallStack() ? "F.getActiveWindow().window." : "";
     var script = $"{top}F.ui['tbxProvince'].setText('{value}');";
     PageContext.RegisterStartupScript(script);
 }
```

# 3. 思考💭
这里是一个例子，实际上不是为了写个简单的✨`SetText`，而是为了写方法提供的一个思路🧠，

简单的`GetFrames`也会消耗性能，在FineUI中父子页面交互 通过 `ActiveWindow.GetWriteBackValueReference` 和 `PageContext.RegisterStartupScript` 配合使用，

像输出的js增加一个头 `F.getActiveWindow().window.` 的这种例子 应该写到` PageContext.RegisterStartupScript`中 或更底层🔨，

C#方法判断调用对象

好久没有做内容了，手痒痒，找个控件说说，放点代码

# 1. 简介
昨天开发用到了步骤条 Step，长这样：

![图片.png](/static/img/f59c753e0081b11bfc8b32ab71f3fada.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
时使用时代码
![图片.png](/static/img/bf4f8d9f93d5add78f6864903c0f9100.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


# 2. 扩展控件
这里的 `F.Step` 是改造的 Panel 控件，Panel就当是个div，修改了渲染 `OnFirstPreRender`，抛出了自定义的html和js，就成步骤条了， 那么如何像 `F.Panel` 那样 写一个前台的控件呢

## 2.1 继承 Panel
第一步就是继承 `FineUICore.Panel `，重写 `OnFirstPreRender` ，首先看一下 FineUICore 自己的 Panel怎么写的 
```
namespace FineUICore;

//
// 摘要:
//     面板控件
public class Panel : CollapsablePanel
{
    //
    // 摘要:
    //     渲染 HTML 之前调用（页面第一次加载或者普通回发）
    protected override void OnFirstPreRender()
    {
        base.OnFirstPreRender();
        string scriptContent = $"var {A()}=new F.Panel({d().ToString()});{GlobalConfig.B()}";
        AddStartupScript(scriptContent);
    }
}
``` 
这是反编译后的结果，代码很简单，就是 输出了一段js `new F.Panel` ，所以写的类 Step 只要重写 `OnFirstPreRender` 就行了

```
/// <summary>
///
/// </summary>
public class Step : Panel
{
	/// <summary>
	/// 第一次绘制
	/// </summary>
	protected override void OnFirstPreRender()
	{
		base.OnFirstPreRender();
	}
}
```
还需要一个类 继承 `CollapsablePanelExtension`，前台的 `F.Panel` 就是一个 `PanelExtension` 实例，继承的`CollapsablePanelExtension`，写法如下
```
/// <summary>
/// 步骤条控件
/// </summary>
public class StepExtension : CollapsablePanelExtension<Step, StepExtension>
{
	/// <summary>
	/// 步骤条控件
	/// </summary>
	private Step _source = null;
	
	/// <summary>
	/// 步骤条控件
	/// </summary>
	/// <param name="source"></param>
	public StepExtension(Step source) : base(source)
	{
		_source = source;
	}
}
```
## 2.2 扩展 UIExtension
现在 `StepExtension` 还不能用，我们要再包一下，在cshtml能点出来，需要给 `FineUICore.UIExtension` 扩展，这里也可以查看 F.Panel 不贴出来了，其实它是一个 `IHtmlHelper`，像这样
```
/// <summary>
///
/// </summary>
/// <param name="helperr"></param>
/// <returns></returns>
public static StepExtension Step(this UIExtension<dynamic, dynamic> helperr)
{
	StepExtension r = new StepExtension(new FineUICore.Step());
	return r;
}
```

## 2.3 增加方法和属性
到这里 cshtml 就可以点出来了，`F.Step()` 它继承了Panel的所有属性和方法；
现在可以添加自己的属性了，这里来梳理下，
① 比如我要加一个 StepActive 方法，前端想这么写 `F.Setp().StepActive(1)`，那其实就是 `StepExtension` ，给它加个方法就行了 StepActive()，
② `StepExtension`  中有个实例 `_source` ，将`StepActive`的参数值，赋值到实例 `_source` 中，
③ 最后在`OnFirstPreRender`进行前台的响应，

<div class="mermaid">
sequenceDiagram
    participant 前台
    participant StepExtension
    participant Step
    前台->>StepExtension: F.Setp().StepActive(1)
    StepExtension->>StepExtension: StepActive(index)
    StepExtension->>Step: _source.index = index
    Step->>前台: OnFirstPreRender(_source.index)

</div>

```
/// <summary>
/// 步骤条控件
/// </summary>
public class StepExtension : CollapsablePanelExtension<Step, StepExtension>
{
	/// <summary>
	/// 步骤条控件
	/// </summary>
	private Step _source = null;
	
	/// <summary>
	/// 步骤条控件
	/// </summary>
	/// <param name="source"></param>
	public StepExtension(Step source) : base(source)
	{
		_source = source;
	}
	
	/// <summary>
	/// 步骤
	/// </summary>
	/// <param name="index"></param>
	/// <returns></returns>
	public StepExtension StepActive(int index)
	{
		_source.stepActive = index;
		return this;
	}
}
```
```
/// <summary>
///
/// </summary>
public class Step : Panel
{

	/// <summary>
	/// 当前激活的序号
	/// </summary>
	private int _stepActive = 0;

	/// <summary>
	/// 当前激活的序号
	/// </summary>
	public int stepActive
	{
		get { return _stepActive; }
		set
		{
			_stepActive = value;
		}
	}

	/// <summary>
	/// 第一次绘制
	/// </summary>
	protected override void OnFirstPreRender()
	{
        StringBuilder sb = new StringBuilder();
        sb.Append($"this.stepActive = {stepActive};");
		this.Listeners.Add(new FineUICore.Listener("render", sb.ToString()));
		base.OnFirstPreRender();
	}
}
```
> 注意这里的`OnFirstPreRender` 将输出的内容写在了render事件中，因为本身这里的this就是一个panel实例，所以可以这么写，这里还可以设置panel的默认参数

# 3. 完整代码
剩下就是前端的事了，这里放出完整的代码，
## c#部分
```

	#region Step步骤控件 基于Grid 卡片

	/// <summary>
	/// 步骤条控件
	/// </summary>
	public class StepExtension : CollapsablePanelExtension<Step, StepExtension>
	{
		/// <summary>
		/// 步骤条控件
		/// </summary>
		private Step _source = null;

		/// <summary>
		/// 步骤条控件
		/// </summary>
		/// <param name="source"></param>
		public StepExtension(Step source) : base(source)
		{
			_source = source;

			//默认值
			_source.ShowBorder = false;
			_source.ShowHeader = false;

			//_source.CssClass = "f-step";

			_source.stepActive = 0;
		}

		/// <summary>
		/// 数据源
		/// </summary>
		/// <param name="data"></param>
		/// <returns></returns>
		public StepExtension DataSource(IEnumerable<StepItem> data)
		{
			_source.DataSource = data;
			return this;
		}

		/// <summary>
		/// 步骤
		/// </summary>
		/// <param name="index"></param>
		/// <returns></returns>
		public StepExtension StepActive(int index)
		{
			_source.stepActive = index;
			return this;
		}

		/// <summary>
		/// 是否显示说明
		/// </summary>
		/// <param name="b"></param>
		/// <returns></returns>
		public StepExtension ShowBody(bool b)
		{
			_source.showBody = b;
			return this;
		}
	}

	/// <summary>
	///
	/// </summary>
	public class Step : Panel
	{
		/// <summary>
		/// 当前激活的序号
		/// </summary>
		private int _stepActive = 0;

		/// <summary>
		/// 当前激活的序号
		/// </summary>
		public int stepActive
		{
			get { return _stepActive; }
			set
			{
				_stepActive = value;
			}
		}

		/// <summary>
		/// 数据源
		/// </summary>
		public IEnumerable<StepItem> DataSource { get; set; } = new List<StepItem>();

		/// <summary>
		/// 是否显示明细
		/// </summary>
		public bool showBody { get; set; } = true;

		/// <summary>
		/// 第一次绘制
		/// <para>不能变更的属性在这里</para>
		/// </summary>
		protected override void OnFirstPreRender()
		{
			this.CssClass += " f-step";

			StringBuilder sbel = new StringBuilder();
			sbel.Append($"<ul>");
			for (int i = 0; i < DataSource.Count(); i++)
			{
				var item = DataSource.ToList()[i];
				sbel.Append($"<li class='f-grid-card-row' data-stepId='{item.Id}'>");
				sbel.Append($"<div class='f-step-card' data-step='{i}'>");

				sbel.Append($"<div class='f-step-head'>");
				sbel.Append($" <div class='f-step-icon'>");
				sbel.Append($" <div class='f-step-num'>");
				sbel.Append($"{i + 1}");
				sbel.Append($" </div>");
				sbel.Append($" <div class='f-step-icon-finish f-iconfont-correct'>");
				sbel.Append($" </div>");
				sbel.Append($" </div>");
				sbel.Append($" <div class='f-step-line'>");
				sbel.Append($" </div>");
				sbel.Append($"</div>");

				sbel.Append($"<div class='f-step-main'>");
				sbel.Append($" <div class='f-step-title'>");
				sbel.Append($" {item.Title}");
				sbel.Append($" </div>");
				sbel.Append($" <div class='f-step-des'>");
				sbel.Append($" {item.TextBody}");
				sbel.Append($" </div>");
				sbel.Append($"</div>");

				sbel.Append($"</div>");
				sbel.Append($"</li>");
			}
			sbel.Append($"</ul>");

			this.Content = sbel.ToString();

			StringBuilder sb = new StringBuilder();
			sb.Append($"this.stepActive = {stepActive};");
			sb.Append($"this.showBody = {showBody.ToString().ToLower()};");
			sb.Append($"this.data = {JArray.FromObject(DataSource).ToString()};");
			this.Listeners.Add(new FineUICore.Listener("render", sb.ToString()));
			base.OnFirstPreRender();
		}
	}

	/// <summary>
	/// 项 ID可忽略
	/// </summary>
	public class StepItem
	{
		/// <summary>
		/// ID
		/// </summary>
		public string Id { get; set; }

		/// <summary>
		/// 标题
		/// </summary>
		public string Title { get; set; }

		/// <summary>
		/// 内容
		/// </summary>
		public string TextBody { get; set; }
	}

	#endregion Step步骤控件 基于Grid 卡片

```

## js部分
```
//Panel控件
if (F.Panel) {
	//步骤条订制
	F.Panel.prototype.__stepActive = -1;
	Object.defineProperty(F.Panel.prototype, "stepActive", {
		/**
		 * 从0开始
		 * @@param {number} val
		 */
		set(val) {
			//设置当前激活的 序号
			//无效的样式是 f-state-disabled
			//完成的样式是 f-step-finish
			//后面的 f-step-card 无效
			//当前的 f-step-line 无效
			//前面的 f-step-card 完成
			const t = this;
			let el = t.el.find(`.f-step-card[data-step="${val}"]`);
			//一共几步
			let count = t.el.find(`.f-step-card`).length;
			if (val < 0 || this.__stepActive == val) return;
			while (val > count) {
				val = val - count - 1;
			}
			//重置
			t.el.find(`.f-step-finish`).removeClass("f-step-finish");
			t.el.find(`.f-state-disabled`).removeClass("f-state-disabled");
			for (let i = val + 1; i < count; i++) {
				let nextel = t.el.find(`.f-step-card[data-step="${i}"]`);
				nextel.addClass("f-state-disabled");
			}
			for (let i = 0; i < val; i++) {
				t.el.find(`.f-step-card[data-step="${i}"]`).addClass("f-step-finish");
			}
			el.find(".f-step-line").addClass("f-state-disabled");
			this.__stepActive = val;
			this.trigger("stepChange", []);
		},
		get() {
			return this.__stepActive;
		}
	});
	//监听 showBody 控制是否显示明细
	F.Panel.prototype.__showBody = true;
	Object.defineProperty(F.Panel.prototype, "showBody", {
		/**
		 * @@param {boolean} val
		 */
		set(val) {
			const t = this;
			let el = t.el.find(`.f-step-card .f-step-des`);
			if (!val) {
				el.addClass("f-hidden");
			} else {
				el.removeClass("f-hidden");
			}
			this.__showBody = val;
		},
		get() {
			return this.__showBody;
		}
	});
}
```
## css部分
```
/*步骤条样式*/
.f-step ul {
	display: flex;
	counter-reset: index;
	padding: 20px;
}

.f-step li.f-grid-card-row {
	transition: all .3s;
	border: none;
	border-bottom: 0px solid;
	border-left: 0px solid;
	border-radius: 0px;
	margin: 0px;
	padding: 0px;
	flex: 1;
	min-width: unset;
	display: inline-block;
	position: relative;
}

.f-step li.f-grid-card-row.f-state-active,
.f-step li.f-grid-card-row.f-grid-row-selected,
.f-step li.f-grid-card-row.f-state-hover {
	background: unset;
	color: unset;
}

.f-step .f-step-card {
	transition: all .3s;
}

.f-step .f-step-head {
	display: flex;
}

/*编号*/
.f-step .f-step-head .f-step-num {
	font-size: 16px;
	line-height: 18px;
	text-align: center;
	height: 20px;
	width: 20px;
	border: 1px solid;
	border-radius: 50%;
}

.f-step .f-step-head .f-step-icon {
	height: 20px;
	width: 20px;
	margin: 0px 10px;
}

/*线*/
.f-step .f-step-line {
	border-top: 2px solid;
	margin: 0px;
	flex: 1;
	margin-top: 8px;
	transition: all .3s;
}

/*最后一个横线不显示*/
.f-step li:last-of-type .f-step-line {
	display: none;
}

/*身子*/
.f-step .f-step-main {
	margin-top: 8px;
	padding: 2px;
}

.f-step .f-step-main .f-step-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
}

/*完成*/
.f-step .f-step-icon-finish {
	opacity: 0;
	position: absolute;
	transition: opacity .3s;
	display: inline-block;
	font: normal normal normal 16px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-indent: 0;
	min-width: 16px;
	overflow: hidden;
	background-repeat: no-repeat;
	line-height: 20px;
	font-family: "iconfont";
}

.f-step .f-step-num {
	opacity: 1;
	top: 0px;
	position: absolute;
	transition: all .3s;
}

.f-step .f-step-finish .f-step-num {
	opacity: 0;
	top: -10px;
}

.f-step .f-step-finish .f-step-icon-finish {
	opacity: 1;
}

/*步骤条样式 结束*/
```

FineUICore扩展控件

因为特定场景，想到使用 `html2canvas` 给Grid导出图片，感觉比导出Excel好使一些，这里忽略了Grid的横向滚动条，遇见的可以作为参考，导出的效果还是不错的



# 1. 需要解决的问题
## 1.1 html2canvas 本身的跨域
如果直接使用 `html2canvas` 导出 F.ui.Grid.el 会出现跨域问题，滚动条问题，样式错位问题 等；所以还是采用 Wrapper 或者copy 、shadow 的方式，即复制 F.ui.Grid.el 放到新的div中，再导出；

## 1.2 溢出和滚动条
还有一个问题是滚动条，`html2canvas` 也会截取滚动条，如果溢出，那导出就看不见了，这里因为数据本身不会出现横向滚动条，而且没有分页，所以隐藏横向滚动条，纵向高度百分百以显示全部；

## 1.3 样式的修改
注意在复制后对 Wrapper 中的Grid进行修饰调整，比如有的列需要改为换行（不然挡上也显示不出来），取消选中的行，删除没用的按钮，等；

## 1.4 避免前台遮挡
新增的容器 Wrapper 元素需要实实在在新增到`document.body` 中，不能遮挡原始的 Grid 否则会很奇怪，这里使用 `translateY` 进行偏移，直接偏移一个Grid的高度，就挡不上了，因为没有Y的滚动条，所以看不出来对于前台是无感的；

## 1.5 增加水印
后来有个需求是增加水印，因为`html2canvas` 不支持 `opacity` 所以不能使用 opacity 控制水印，应该使用 `canvas` 这里找到了一个插件一并放出；

# 2 源码
## 2.1 outputimg 看注释就行了

``` js
/**导出图片 */
function outputimg() {
  const divElement = document.getElementById('Grid1');

  // 创建一个新的div元素，避免滚动条
  const screenshotWrapper = document.createElement('div');
  screenshotWrapper.style.overflow = 'hidden';
  screenshotWrapper.style.height = '100%';
  screenshotWrapper.style.width = '100%';
  screenshotWrapper.style.transform = `translateY(${divElement.offsetHeight}px)`;//偏移 以不显示 

  // 创建一个新的div元素，用于容纳截图内容
  const screenshotContent = document.createElement('div');
  screenshotContent.style.width = '100%';

  // 将原始Grid的内容复制到新的div元素中
  screenshotContent.innerHTML = divElement.innerHTML;
  // 将新的div元素添加到截图容器中
  screenshotWrapper.appendChild(screenshotContent);

  //复制之后就可以对Wrapper中的Grid进行操作
  //解决滚动条的问题 Grid原始的高度直接不要
  $(screenshotContent).find(`.f-panel-body`).height(`unset`);
  $(screenshotContent).find(`.f-grid-bodyct`).height(`unset`);
  //选中的和激活的行样式都删除
  $(screenshotContent).find(`.f-grid-row-selected`).removeClass(`f-grid-row-selected`);
  $(screenshotContent).find(`.f-state-active`).removeClass(`f-state-active`);

  //删除按钮或其他
  $(screenshotContent).find(`.btn`).remove();
  //这里做了某一列的换行
  $(screenshotContent).find(`[data-columnid="MB003"] .f-grid-cell-inner`).css({
      "whiteSpace": "normal",
      "wordBreak": "break-all"
  });
  
  //添加到body中
  document.body.appendChild(screenshotWrapper);
  //增加水印
  new watermark({
      text: `${thisusername} ${thisdate}`,  //水印内容
      render: screenshotContent,
  });
  // 使用html2canvas进行截图操作
  html2canvas(screenshotWrapper, { useCORS: true }).then(canvas => {
      // 创建一个新的图片元素
      //const image = new Image();
      //image.src = canvas.toDataURL('image/png');
      // 将图片元素添加到页面中
      //document.body.appendChild(image);
      const dataURL = canvas.toDataURL('image/png');
      // 创建一个虚拟的下载链接
      const downloadLink = document.createElement('a');
      downloadLink.href = dataURL;
      downloadLink.download = '导出图片.png';
      // 触发点击事件进行下载
      downloadLink.click();
      $(screenshotWrapper).remove();
  });
}
```

## 2.2 watermark.js 水印
```
(function (window) {
    /**
     * js水印插件
     * 自动在body底部生成一个水印
     * auth：zhangdaren
     * date：20190218
     * version: v1.0
     *
     * */
    var canvas = null;
    var setting = {
        render: document.body,
        text: "水印测试", //水印内容，将来支持数组和图片
        fontSize: "24", //字体大小
        color: "#000", //水印字体颜色
        opacity: 0.1, //水印透明度
        rotate: 20, //水印旋转角度
        spaceX: 10, //间隔
        spaceY: 10, //间隔
    };
    var ww; //屏幕宽度
    var wh; //屏幕高度
    var ctx;

    function watermark(option) {
        return new watermark.prototype.init(option);
    }
    watermark.prototype = {
        constructor: watermark,
        init: function (option) {
            if (option && Object.keys(option).length > 0) {
                //
                setting.text = option.text;
                setting.fontSize = option.fontSize || setting.fontSize;
                setting.color = option.color || setting.color;
                setting.opacity = option.opacity || setting.opacity;
                setting.rotate = option.rotate || setting.rotate;
                setting.spaceX = option.spaceX || setting.spaceX;
                setting.spaceY = option.spaceY || setting.spaceY;
                setting.render = option.render || setting.render;
            }

            ww = setting.render.clientWidth;
            wh = setting.render.clientHeight;
            //
            canvas = document.createElement("canvas");
            canvas.style = "position:absolute; z-index:0; width:100%;height:100%;left:0;top:0";
            canvas.setAttribute("width", ww);
            canvas.setAttribute("height", wh);
            setting.render.append(canvas);

            ctx = canvas.getContext("2d");

            //渲染
            watermark.prototype.render();
        },
        render() {
            watermark.prototype.clear();
            //
            ctx.font = setting.fontSize + "px Calibri";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillStyle = setting.color;
            ctx.globalAlpha = setting.opacity; //这里是设置全局的透明度

            //获取文本宽高
            var txtWidth = ctx.measureText(setting.text).width;
            //单个文字宽高
            var singleTxtHeight = ctx.measureText("鹏").width;
            //横向数量，这里加2是为了补全一些情况
            var columnNum = parseInt(ww / txtWidth + 2);
            //文字的高度，与旋转的角度有关
            var txtHeight = Math.abs(singleTxtHeight * Math.sin(setting.rotate * Math.PI / 180) * setting.text.length); // * setting.text.length;
            //行数
            var rowNum = parseInt(wh / txtHeight);

            for (var i = 0; i < rowNum; i++) {
                var y = (txtHeight + setting.spaceY) * i;
                for (var j = 0; j < columnNum; j++) {
                    var x = (txtWidth + setting.spaceX) * j;
                    //保存上次状态
                    ctx.save();
                    //旋转canvas
                    rotateContext(ctx, x, y, -setting.rotate);
                    ctx.fillText(setting.text, x, y);
                    //回到上次状态 //用于重置canvas的旋转
                    ctx.restore();
                }
            }
        },
        clear() {
            ctx.clearRect(0, 0, ww, wh);
        }
    };

    //确保是以(x,y)为中心进行旋转，而不是简单的以画布原点旋转
    function rotateContext(ctx, x, y, degree) {
        ctx.translate(x, y);
        ctx.rotate(degree * Math.PI / 180);
        ctx.translate(-x, -y);
    }

    function onResize() {
        //重新获取window宽高
        ww = setting.render.clientWidth;
        wh = setting.render.clientHeight;
        //重新设置canvas宽高
        canvas.setAttribute("width", ww);
        canvas.setAttribute("height", wh);
        //重绘
        watermark.prototype.clear();
        watermark.prototype.render();
    }

    window.onresize = function () {
        throttle(onResize, window);
    }

    //函数节流
    function throttle(method, context) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function () {
            method.call(context);
        }, 500);
    }

    window.watermark = watermark;
})(window);
```

![](https://shixixiyue.gitee.io//post-images/1695023023086.png)

![](https://shixixiyue.gitee.io//post-images/1695023153323.png)

FineUIGrid导出图片的实践

昨天使用FineUIGrid写了一个购物车，主要是改变数量和单价计算总价的功能，纯前端。在实现时遇到了坑，解决后使用了闭包的结构优化，这里推演下应用的过程



# 1. 代码概览
首先购物车需要两个列，数量和单价，可以编辑，这里使用了 `RendererFunction` 进行绘制，绘制函数就是返回个 `input` 标签
购物车的项需要新增和删除，这里对应两个方法 `adddata` 和 `removedata`，在修改数据后需要计算合计价格:`updateTotal` ，所以有代码如下，这里抽象一下，细节不重要
```
/**绘制输入数量*/
const renderNumber = function(v, { rowId, rowValue }, m, g){
     return `<input  id="Number_${rowId}" value="${v}" class="number" style="width:98%;" type="text">`;
}
```
```
/**
 * 新增方法
 * @param {[MsINVMB]} values 新增的数据数组
 */
function adddata(values){
    F.ui.Grid1.addNewRecords(data, true);
    //更新总价
    updateTotal();
}
```
```
/**
 * 删除方法
 * @param {ID} rowId 删除的ID
 */
function removedata(rowId){
    F.ui.Grid1.deleteRow(rowId, true);
    //更新总价
    updateTotal();
}
```
```
/**
 * 更新总价
 */
function updateTotal(){
    //计算总价
    let res = GetSummary();
    //更新总价
    F.ui.Grid1.setSummaryData(res);
}
```

# 2. 问题
熟悉FineUI前端的能感觉到坑来了，调用过 `addNewRecords` 或 `deleteRow` 的同学都知道，这两个方法会重绘Grid，即触发 `renderNumber` 函数，造成输入的值会被重置，比如我在某行的数量输入了2，然后新增了一行，执行 `addNewRecords` ，然后输入的2没了，成默认项了，这时总价也不对了；这里不讨论为什么会触发绘制，对外可能是逆天的，但是对内是自洽的；
最直接的解决方法就是在 新增 或 删除 行之前先得到录入的值，执行新增后再给赋上，然后计算总价；所以多了两个方法 `GetInputVal` 和 `SetInputVal` ，改造如下;
```
/**
 * 新增方法
 * @param {[MsINVMB]} values 新增的数据数组
 */
function adddata(values){
    let rawvalue = GetInputVal();
    F.ui.Grid1.addNewRecords(data, true);
    SetInputVal(rawvalue);
    //更新总价
    updateTotal();
}

/**
 * 删除方法
 * @param {ID} rowId 删除的ID
 */
function removedata(rowId){
    let rawvalue = GetInputVal();
    F.ui.Grid1.deleteRow(rowId, true);
    SetInputVal(rawvalue);
    //更新总价
    updateTotal();
}
```

# 3. 优化
这时让我别扭的地方来了，我最讨厌割裂，明显 `GetInputVal` 和 `SetInputVal` 是一对，在调用时中间间隔其他的逻辑，而且他俩本身不参与其他逻辑，`SetInputVal` 只接收 `GetInputVal` 返回的值，`rawvalue` 外露没有意义还有可能被篡改，所以我感觉他俩应该是一个函数，为什么方法我还要写两个，我能不能塞到一个函数里，并且中间还可以跨其他的逻辑；
```
/**得到值*/
function GetInputVal(){}
/**设置值*/
function SetInputVal(values){}
```
这个场景下，我想到了使用闭包的方式，有一个函数 `RestoreInputVal` ，如果要跨过其他逻辑，这个函数返回的应该是 `SetInputVal` 的实现而不是调用，它应该这么写
```
/**还原值*/
function RestoreInputVal(){
    const GetInputVal = ()=>...;
    const SetInputVal = (values)=>...;
    let rawvalue = GetInputVal();
    return ()=>{
        SetInputVal(rawvalue);
    };
}
```
用的时候像这样
```
/**
 * 新增方法
 * @param {[MsINVMB]} values 新增的数据数组
 */
function adddata(values){
    let restorval = RestoreInputVal();
    F.ui.Grid1.addNewRecords(data, true);
    restorval();
    //更新总价
    updateTotal();
}

/**
 * 删除方法
 * @param {ID} rowId 删除的ID
 */
function removedata(rowId){
    let restorval = RestoreInputVal();
    F.ui.Grid1.deleteRow(rowId, true);
    restorval();
    //更新总价
    updateTotal();
}
```
这样就实现了 `rawvalue` 的闭包，以此作为一个典型的应用案例

其实要按照面向对象的思路应该是一个 class ,这里也不考虑继承扩展，所以就不深入了
```
class InputRestore {

  #rawValue;

  constructor() {
    this.#rawValue = this.#getInputValue(); 
  }

  #getInputValue() {
    // 原逻辑
  }

  #setInputValue(value) {
   // 原逻辑 
  }

  restore() {
    this.#setInputValue(this.#rawValue);
  }

}
```