![我的画板 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);
  }

}
```

JS闭包的应用实例

开发时遇到了这个情况，我想在两个业务类中传输数据，即类1定义了日志的实现，类2调用，所以我想将日志实现作为一个依赖注入，使用 Scoped 在本次提交时生效，然而我的业务代码是 Singleton 注入 `services.AddSingleton` ，当业务类直接通过构造引用区域依赖 Scoped 时会报错，稍微测试了一下，这里记录总结；



# 1. 环境准备 还原错误

1.1 新建 一个消息类 `ScopeInfo` , 两个业务类 `Class1` 和 `Class2` 

```
namespace ScopeTest
{
    public class ScopeInfo
    {
        public int Count { get; set; } = 0;
    }
}
```

```
namespace ScopeTest
{
    public class Class1
    {
        private ScopeInfo info;

        public Class1(ScopeInfo info)
        {
            this.info = info;
        }

        public Class1 SetValue()
        {
            this.info.Count++;
            Console.WriteLine($"{nameof(Class1)}:{info?.Count}");
            return this;
        }
    }
}
```

```
namespace ScopeTest
{
    public class Class2
    {
        private ScopeInfo info;

        public Class2(ScopeInfo info)
        {
            this.info = info;
        }

        public Class2 GetValue()
        {
            Console.WriteLine($"{nameof(Class2)}:{info?.Count}");
            return this;
        }
    }
}
```

1.2 注册注入
```
builder.Services.AddSingleton<Class1>();
builder.Services.AddSingleton<Class2>();
builder.Services.AddScoped<ScopeInfo>();
```

1.3 在方法中使用
```
public WeatherForecastController(Class1 class1, Class2 class2)
{
	this.class1 = class1;
	this.class2 = class2;
}

[HttpGet(Name = "GetWeatherForecast")]
public IEnumerable<WeatherForecast> Get()
{
	class1.SetValue();
	class2.GetValue();
	...略
}
```

1.4 运行报错
运行后不能启动，报错 ❗️
```
System.AggregateException:“Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: ScopeTest.Class1 Lifetime: Singleton ImplementationType: ScopeTest.Class1': Cannot consume scoped service 'ScopeTest.ScopeInfo' from singleton 'ScopeTest.Class1'.) (Error while validating the service descriptor 'ServiceType: ScopeTest.Class2 Lifetime: Singleton ImplementationType: ScopeTest.Class2': Cannot consume scoped service 'ScopeTest.ScopeInfo' from singleton 'ScopeTest.Class2'.)”
```

翻译过来就一句话 `无法从单例 "ScopeTest.Class1 "消费作用域服务 "ScopeTest.ScopeInfo"` 

因为 `Class1` 和 `Class2` 都是全局单例的，所以一开始就会实例，而 `ScopeInfo` 提交时才实例，所以拿不到；

# 2. 第一次尝试

聪明的小伙伴😑已经想到了，可以从 `IServiceProvider` 中获取注入，而不是构造，将 `Class1` 和 `Class2` 改造

```
namespace ScopeTest
{
    public class Class1
    {
        private ScopeInfo info;
        private readonly IServiceProvider applicationServices;

        public Class1(IServiceProvider applicationServices)
        {
            //第一次尝试
            this.applicationServices = applicationServices;
            //从IServiceProvider 中拿
            info = applicationServices.GetService<ScopeInfo>();
        }

        public Class1 SetValue()
        {
            this.info.Count++;
            Console.WriteLine($"{nameof(Class1)}:{info?.Count}");
            return this;
        }
    }
}
```

```
namespace ScopeTest
{
    public class Class2
    {
        private ScopeInfo info;
        private readonly IServiceProvider applicationServices;

        public Class2(IServiceProvider applicationServices)
        {
            //第一次尝试
            this.applicationServices = applicationServices;
             //从IServiceProvider 中拿
            info = applicationServices.GetService<ScopeInfo>();
        }

        public Class2 GetValue()
        {
            Console.WriteLine($"{nameof(Class2)}:{info?.Count}");
            return this;
        }
    }
}
```

这次可以运行启动了，我们来触发一次访问，
报错了 ❗️
```
System.InvalidOperationException:“Cannot resolve scoped service 'ScopeTest.ScopeInfo' from root provider.”
```
翻译过来 `无法从根提供程序解析作用域服务 "ScopeTest.ScopeInfo"` 

2.1 这里需要创建区域
使用 ` CreateScope()` 可以解决这个问题，写成这样
```
 info = applicationServices.CreateScope().ServiceProvider.GetService<ScopeInfo>();
```

到这提交终于不报错了 ，输出如下
```
Class1:1
Class2:0
```

很明显 `Class1` 的赋值 没有传入到 `Class2` 中🤔，因为在构造时区域是 `Create` 出来的，每次 `CreateScope()` 都是新的区域，所以  `Class1` 和 `Class2` 是两个实例

# 3. 第二次尝试
这时我又想使用第三个类来 `CreateScope` 并且赋值到一个变量，这样区域就一个了，但是这个中间类 `Middle` 其实和 `ScopeInfo` 类的生命周期是一样的，如果使用 `AddSingleton` 会全局实例化一次，当第二次提交时不实例化，`ScopeInfo` 会保留上次的值，这样不行；如果使用 `AddScoped` 注入，和 `ScopeInfo` 一样 `Class1` 和 `Class2` 还是无法获取到区域实例；

# 4. 第三次尝试
再来捋一下需求，我希望 类`ScopeInfo` 在请求开始实例化一次，之后的所有类中都是这个实例，请求结束销毁，这个类是个什么呢；其实就是当前的上下文 `HttpContext` ，而且 `HttpContext` 本来也专门干这个事 `HttpContext.Items`😲

我已经使用 `AddScoped<ScopeInfo>();` 了，所以我肯定不会再手动 `HttpContext.Items["ScopeInfo"] =new ScopeInfo();` 放一次，也不会出现 `new ScopeInfo()` 的写法，所以这里放进去的不应该是 `ScopeInfo` ，而是当前区域，即 提交时，我将 `CreateScope` 放到 `HttpContext.Items` 中，这样，所有的类中的区域就一样了，而且提交结束后会随 `HttpContext` 释放；

问题来了，怎么在提交时 将 一个类 或者 参数 放到 `HttpContext.Items`  中呢，这样写
```
//这里需要注入 IHttpContextAccessor
builder.Services.AddHttpContextAccessor();
app.Use(async (context, next) =>
{
    context.Items["SharedScope"] = app.Services.CreateScope();
    await next();
});
```
将 `Class1` 和 `Class2` 改造

```
namespace ScopeTest
{
    public class Class1
    {
        //不要在构造柱中实例了，直接拿
        private ScopeInfo info => (httpContext.HttpContext.Items["SharedScope"] as IServiceScope).ServiceProvider.GetService<ScopeInfo>();
        //private readonly IServiceProvider applicationServices;
        //当前上线文
        private readonly IHttpContextAccessor httpContext;

        public Class1(IServiceProvider applicationServices, IHttpContextAccessor httpContext)
        {
            //第一次尝试
            //this.applicationServices = applicationServices;
            //info = applicationServices.GetService<ScopeInfo>();
            this.httpContext = httpContext;
        }

        public Class1 SetValue()
        {
            this.info.Count++;
            Console.WriteLine($"{nameof(Class1)}:{info?.Count}");
            return this;
        }
    }
}
```

```
namespace ScopeTest
{
    public class Class2
    {
        //不要在构造柱中实例了，直接拿
        private ScopeInfo info => (httpContext.HttpContext.Items["SharedScope"] as IServiceScope).ServiceProvider.GetService<ScopeInfo>();
        //private readonly IServiceProvider applicationServices;
        //当前上线文
        private readonly IHttpContextAccessor httpContext;

        public Class2(IServiceProvider applicationServices, IHttpContextAccessor httpContext)
        {
            //第一次尝试
            //this.applicationServices = applicationServices;
            //info = applicationServices.GetService<ScopeInfo>();
            this.httpContext = httpContext;
        }

        public Class2 GetValue()
        {
            Console.WriteLine($"{nameof(Class2)}:{info?.Count}");
            Console.WriteLine($"================================");
            return this;
        }
    }
}
```
这时 再次提交测试 输出如下
```
Class1:1
Class2:1
================================
Class1:1
Class2:1
================================
```

可以看到值被共享了，而且两次提交 值被重置，😬

4.1 封装
`HttpContext.Items` 很难看，如果是强类型，可以使用 `HttpContext.Features.Set` ；创建一个类 `SharedScope` 和 `HttpContext` 的扩展方法 
```
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ScopeTestWebAPP.ScopeTest
{
    public class SharedScope
    {
        public IServiceScope? sharedScope;

        public SharedScope(IApplicationBuilder app)
        {
            sharedScope = app?.ApplicationServices?.CreateScope();
        }
    }

    public static class HttpContextExtensions
    {
        /// <summary>
		/// 得到服务从上下文共享的Scope中，
		/// </summary>
		/// <typeparam name="T"></typeparam>
		/// <returns></returns>
		public static T GetServerScope<T>(this HttpContext context)
        {
            var share = context.Features.Get<SharedScope>();
            return share.sharedScope.ServiceProvider.GetService<T>();
        }
    }
}

```

在注册时可以这样写
```
app.Use(async (context, next) =>
{
    context.Features.Set(new SharedScope(app));
    await next();
});
```

使用时可以这样
```
using ScopeTestWebAPP.ScopeTest;

namespace ScopeTest
{
    public class Class1
    {
        private ScopeInfo info => httpContext.HttpContext.GetServerScope<ScopeInfo>();
        //当前上线文
        private readonly IHttpContextAccessor httpContext;
        public Class1(IHttpContextAccessor httpContext)
        {
            this.httpContext = httpContext;
        }
    }
}
```

`IHttpContextAccessor` 也不想写，可以写到静态类里，其实项目中用是这样的 

 ```
namespace ScopeTest
{
    public class Class1
    {
       private ScopeInfo info => 
            FineUICore.PageContext.Current.GetServerScope<ScopeInfo>();
        //又是FineUICore 😐
        public Class1()
        {
        }
    }
}
```

另外再异步应将 `sharedScope` 套上 `AsyncLocal`，这部分我倒没有测试