STNodeEditor/docs/tutorials_cn.html at main · DebugST/STNodeEditor

History

1225 lines (1223 loc) · 142 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

<!DOCTYPE html>

<html>

<head>

<title>STNodeEditor - 教程</title>

</head>

<body>

<li>

<ul>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_c'>[基础]STNode</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_e'>STNodeOption</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_f'>STNodeOption.Empty</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_g'>STNode.AutoSize</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_h'>案例 - ClockNode</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_i'>STNode.SetOptionXXX</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_j'>关于数据传递</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_k'>STNodeHub</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_l'>[基础]STNodeControl</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_m'>添加一个控件</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_n'>自定义一个 Button</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_o'>案例 - 图像信息获取</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_p'>[基础]STNodeEditor</a>

<ul>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_u'>STNodePropertyGrid</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_w'>STNodePropertyAttribute</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_x'>STNodeAttribute</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_a'>ReadOnlyModel</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='b_b'>STNodePropertyDescriptor</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_c'>失败案例 - ColorTestNode</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_d'>关于属性描述器</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_e'>GetValueFromString()</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_f'>GetStringFromValue()</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_g'>成功案例 - ColorTestNode</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_h'>高级案例 - ColorTestNode</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='b_i'>STNodeTreeView</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_k'>加载程序集</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='b_l'>持久化保存</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_n'>OnSaveNode(dic)</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_o'>GetBytesFromValue()</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_p'>OnLoadNode(dic)</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_q'>OnEditorLoadCompleted</a></li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>2021-04-29

</div>

那是一个冬季在研究无线电安全的作者接触到了<a target='_bank' href='https://www.gnuradio.org/'>GNURadio</a> 那是作者第一次接触到节点编辑器

-> What? Excuse me... What"s this?.. 这是什么鬼东西?...

那是一个春季不知道为什么过完年整个世界都变了大家被迫窝在家里无聊至极的作者学起了<a target='_bank' href='https://www.blender.org/'>Blender</a>那是作者第二次接触到节点编辑器

-> Wo...原来这东西可以这么玩...真方便

于是一些想法在作者脑中逐渐诞生让作者有了想做一个这样的东西的想法

那是一个夏季不知道为什么作者又玩起了<a target='_bank' href='http://www.blackmagicdesign.com/cn/products/davinciresolve/'>Davinci</a>那是作者第三次接触到节点编辑器这一次的接触让作者对节点编辑器的好感倍增作者瞬间觉得只要是可以模块化流程化的功能万物皆可节点化

所以STNodeEditor就诞生了

<hr/>

<h1 class='h_title anchor_point' anchor='a_c'>[基础]STNode</h1>

STNode是整个框架的核心如果把STNodeEditor视为Desktop 那么一个STNode就可以视为桌面上的一个应用程序开发一个健壮的STNode是非常有必要的事情

<hr/>

<hr/>

节点的基类STNode被abstract修饰无法直接创建节点所以节点必须继承至STNode

STNode包含了大量的virtual函数可供开发者重写对于详细的函数列表请参考<a target='_bank' href='./doc.html'>API文档</a>

<pre class='pre_code'>using ST.Library.UI.NodeEditor;

namespace WinNodeEditorDemo

{

public class MyNode : STNode

{

public MyNode() { //与OnCreate()等效

this.Title = "TestNode";

}

//protected override void OnCreate() {

// base.OnCreate();

//}

}

}

//添加到STNodeEditor中

stNodeEditor1.Nodes.Add(new MyNode());</pre>

</div>

会发现只看到一个标题什么都没有因为并没有为它添加输入输出选项所以重新修改代码

<pre class='pre_code'>public class MyNode : STNode

{

protected override void OnCreate() {

base.OnCreate();

this.Title = "TestNode";

//此添加方式会得到添加成功后的 STNodeOption 索引位置

int nIndex = this.InputOptions.Add(new STNodeOption("IN_1", typeof(string), false));

//此添加方式能直接得到一个构建的 STNodeOption

STNodeOption op = this.InputOptions.Add("IN_2", typeof(int), true);

this.OutputOptions.Add("OUT", typeof(string), false);

}

}</pre>

</div>

这样节点上就会出现所添加的选项但是这样还不够可以看到一共有两个数据类型string和int应该给数据类型赋予颜色信息来区分不同的数据类型

{

protected override void OnCreate() {

base.OnCreate();

this.Title = "TestNode";

//this.SetOptionDotColor(op, Color.Red); 优先级最高如果被设置会忽略容器中的颜色信息

}

//当所属容器发生变化时候发生应当向容器提交自己数据类型期望显示的颜色

protected override void OnOwnerChanged() {

base.OnOwnerChanged();

if (this.Owner == null) return;

this.Owner.SetTypeColor(typeof(string), Color.Yellow);

//此添加方式会替换容器中已有的类型颜色信息

this.Owner.SetTypeColor(typeof(int), Color.DodgerBlue, true);

}

}</pre>

</div>

这样一个节点就创建完成了但是这个节点目前不具备任何的功能接下来的案例中将逐步添加功能

无论如何开发者都应该尽量为扩展的STNode保留一个空参数构造器不然在很多功能使用会存在不必要的麻烦

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_e'>STNodeOption</h2></div>

<hr/>

由上面的案例可知STNodeOption是STNode的连接选项连接选项可以是多连接和单连接模式

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

//单连接选项

this.InputOptions.Add("Single", typeof(string), true);

//多连接选项

this.OutputOptions.Add("Multi", typeof(string), false);

}

}</pre>

</div>

在多连接模式下一个选项可以被同数据类型的多个选项连接以方形绘制

在单连接模式下一个选项仅可被同数据类型的一个选项连接以圆形绘制

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_f'>STNodeOption.Empty</h2></div>

<hr/>

STNodeOption.Empty是一个静态属性添加到STNode中仅用于在自动布局时候占位使用不参与绘制与事件触发

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

this.InputOptions.Add(STNodeOption.Empty);

this.InputOptions.Add("IN_1", typeof(string), false);

this.InputOptions.Add("IN_2", typeof(string), false);

this.OutputOptions.Add("OUT_1", typeof(string), false);

this.OutputOptions.Add(STNodeOption.Empty);

this.OutputOptions.Add("OUT_2", typeof(string), false);

}

}</pre>

</div>

每一个STNodeOption的高度由STNode.ItemHeight(protected)决定

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_g'>STNode.AutoSize</h2></div>

<hr/>

AutoSize默认为true 在此状态下节点的WidthHeight等属性无法被设置

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

this.InputOptions.Add("IN", typeof(string), false);

//需要先设置AutoSize=false 才能设置STNode大小

this.AutoSize = false;

this.Size = new Size(100, 100);

}

}</pre>

</div>

可以看到MyNode的大小不再自动计算可STNodeOption的位置依旧会进行自动计算如果想修改STNodeOption的位置可以重写OnSetOptionXXX

{

private STNodeOption m_op_in;

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

m_op_in = this.InputOptions.Add("IN", typeof(string), false);

m_op_out = this.OutputOptions.Add("OUT", typeof(string), false);

//需要先设置AutoSize=false 才能设置STNode大小

this.AutoSize = false;

this.Size = new Size(100, 100);

}

//无论AutoSize为何值都可以对选项连接点位置进行修改

protected override Point OnSetOptionDotLocation(STNodeOption op, Point pt, int nIndex) {

if (op == m_op_in) return new Point(pt.X, pt.Y + 20);

return base.OnSetOptionDotLocation(op, pt, nIndex);

}

//无论AutoSize为何值都可以对选项文本显示区区域进行修改

protected override Rectangle OnSetOptionTextRectangle(STNodeOption op, Rectangle rect, int nIndex) {

if (op == m_op_out) return new Rectangle(rect.X, rect.Y + 20, rect.Width, rect.Height);

return base.OnSetOptionTextRectangle(op, rect, nIndex);

}

}</pre>

</div>

可以看到代码中修改STNodeOption连线的点和文本区域是通过重写函数去修改的为什么不设计成STNodeOption.DotLeft=xxx的方式是因为作者认为这样反而会更加的麻烦

重写函数中所传入的ptrect都是自动计算过后的数据这样开发者在修改位置的时候会有一定的参照如果通过STNodeOption.DotLeft=xxx这样的方式那么开发者无法得到一个参照位置需要全部自己计算

而且还需要绑定STNode.Resize等事件来监听STNode大小的变化来重新计算位置所以相比之下OnSetOptionXXX的方式反而相对没那么繁琐

目前为止出现的所有案例都不具备数据的传递与接收在接下来的案例中将开始添加功能

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_h'>案例 - ClockNode</h2></div>

<hr/>

STNodeOption通过对DataTransfer事件的绑定可以获取到此选项的所有数据输入

STNodeOption.TransferData(object)函数可以向此选项上的所有连线传递数据

接下来实现一个具备一定功能的节点目前而言能想到的最好的实现就是定义一个时钟节点

因为目前介绍到的内容还不足以能够自由的向节点提供任意数据所以需要一个能自己产生数据的节点

该节点每秒钟向外输出一次当前系统时间

<pre class='pre_code'>public class ClockNode : STNode

{

private Thread m_thread;

private STNodeOption m_op_out_time;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ClockNode";

m_op_out_time = this.OutputOptions.Add("Time", typeof(DateTime), false);

}

//当所属容器发生变化时候发生

protected override void OnOwnerChanged() {

base.OnOwnerChanged();

if (this.Owner == null) { //当容器被置空时停止线程

if (m_thread != null) m_thread.Abort();

return;

}

this.Owner.SetTypeColor(typeof(DateTime), Color.DarkCyan);

m_thread = new Thread(() => {

while (true) {

Thread.Sleep(1000);

//STNodeOption.TransferData(object) 会自动的向选项上所有连接投递数据

//STNodeOption.TransferData(object) 会自动设置STNodeOption.Data

m_op_out_time.TransferData(DateTime.Now);

//与WinForm一样在线程中如果需要跨UI线程操作节点提供了 Begin/Invoke() 可完成对应操作

//this.BeginInvoke(new MethodInvoker(() => m_op_out_time.TransferData(DateTime.Now)));

}

}) { IsBackground = true };

m_thread.Start();

}

}</pre>

</div>

当然上面的节点我们可以直接显示时间但是为了演示数据的传递还需要一个作为接受数据的节点

<pre class='pre_code'>public class ShowClockNode : STNode {

private STNodeOption m_op_time_in;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ShowTime";

//由于此节点仅能显示一个时间选项应当采用"单连接"模式仅接受一个时间数据

m_op_time_in = this.InputOptions.Add("--", typeof(DateTime), true);

//监听事件当有数据被传输到m_op_time_in时会触发此事件

m_op_time_in.DataTransfer += new STNodeOptionEventHandler(op_DataTransfer);

}

void op_DataTransfer(object sender, STNodeOptionEventArgs e) {

//不仅仅是有数据传入时才会触发此事件当有连接或断开时同样触发此事件所以需要判断连接状态

if (e.Status != ConnectionStatus.Connected || e.TargetOption.Data == null) {

//当STNode.AutoSize=true时并不建议使用STNode.SetOptionText

//因为在AutoSize下Text每发生一次变化STNode就会重新计算一次布局应当通过添加控件方式来显示

//由于当前还并未讲解到STNodeControl 所以这里暂时先采用当前设计

this.SetOptionText(m_op_time_in, "--");

} else {

this.SetOptionText(m_op_time_in, ((DateTime)e.TargetOption.Data).ToString());

}

}</pre>

</div>

添加到STNodeEditor中的效果如下

可以看到ShowClockNode每秒都在刷新时间同样通过上面代码可以看到ShowClockNode并没有重写OnOwnerChanged()函数向容器添加数据类型颜色信息

如果先把ShowClockNode添加到STNodeEditor中会发现节点选项确实没有颜色但若ClockNode被添加时候会发现ShowClockNode的选项立马就有了颜色

因为ClockNode在添加的时候向容器提交了数据类型的颜色而ShowClockNode选项的数据类型和ClockNode一样所以自然在绘制的时候具备了颜色数据

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_i'>STNode.SetOptionXXX</h2></div>

<hr/>

在上面和之前的案例中可以看到需要修改STNodeOption一些属性的时候并不是STNodeOption.XXX=XXX方式去修改的之所以这样设计是为了处于安全考虑

作者认为一个STNodeOption只能被它的所有者所修改而STNodeOption.XXX=XXX的方式无法确定是被谁修改的而STNode.SetOptionXXX()被protected所标记只能在内部被调用且在函数内部会判断STNodeOption.Owner是否是当前类以确保安全

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_j'>关于数据传递</h2></div>

<hr/>

并不是一定要STNodeOption.TransferData(object)才能向下面的选项传递数据TransferData(object)仅仅是主动向下更新数据

当一个新的连接刚被建立的时候会被动传递一次数据下面将ClockNode的代码修改一下

{

private Thread m_thread;

private STNodeOption m_op_out_time;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ClockNode";

//对选项的数据赋值

m_op_out_time.Data = DateTime.Now;

}

}</pre>

</div>

可以看到ShowClockNode依然显示了时间只是数据不再变化因为在建立连接的同时也会触发DataTransfer事件在事件中ShowClockNode通过e.TargetOption.Data获取到了ClockNode选项的数据

当一个连接被建立与断开时事件触发顺序如下

Connecting-Connected-DataTransfer | DisConnecting-DataTransfer-DisConnected

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_k'>STNodeHub</h2></div>

<hr/>

STNodeHub是一个内置的节点其主要作用分线可以将一个输出分散到多个输入或多个输出集中到一个输入点上以避免重复布线也可在节点布线复杂时用于绕线

<h1 class='h_title anchor_point' anchor='a_l'>[基础]STNodeControl</h1>

STNodeControl作为STNode控件的基类有着许多与System.Windows.Forms.Control同名的属性及事件使得开发者可以像开发WinForm程序一样去开发一个节点

在此版本(2.0)中并没有提供任何一个可用控件仅STNodeControl基类需开发者继承进行扩展若后期有空作者再来完善

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_m'>添加一个控件</h2></div>

<hr/>

与System.Windows.Forms.Control一样 STNode拥有Controls集合其数据类型为STNodeControl

{

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

//需要先设置AutoSize=false 才能设置STNode大小

this.AutoSize = false;

this.Size = new Size(100, 100);

var ctrl = new STNodeControl();

ctrl.Text = "Button";

ctrl.Location = new Point(10, 10);

this.Controls.Add(ctrl);

ctrl.MouseClick += new MouseEventHandler(ctrl_MouseClick);

}

void ctrl_MouseClick(object sender, MouseEventArgs e) {

MessageBox.Show("MouseClick");

}

}</pre>

</div>

可以看到与开发WinForm程序几乎没有任何区别唯一不同的是STNode暂时还不提供所见即所得的UI设计器

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_n'>自定义一个 Button</h2></div>

<hr/>

虽然上面的代码看起来像是添加了一个按钮控件事实上那仅仅是STNodeControl的默认绘制样式

下面来自定义一个Button控件具备鼠标悬停和点击效果使其更加像一个按钮

<pre class='pre_code'>public class STNodeButton : STNodeControl {

private bool m_b_enter;

private bool m_b_down;

protected override void OnMouseEnter(EventArgs e) {

base.OnMouseEnter(e);

m_b_enter = true;

this.Invalidate();

}

protected override void OnMouseLeave(EventArgs e) {

base.OnMouseLeave(e);

m_b_enter = false;

this.Invalidate();

}

protected override void OnMouseDown(MouseEventArgs e) {

base.OnMouseDown(e);

m_b_down = true;

this.Invalidate();

}

protected override void OnMouseUp(MouseEventArgs e) {

base.OnMouseUp(e);

m_b_down = false;

this.Invalidate();

}

protected override void OnPaint(DrawingTools dt) {

//base.OnPaint(dt);

Graphics g = dt.Graphics;

SolidBrush brush = dt.SolidBrush;

brush.Color = base.BackColor;

if (m_b_down) brush.Color = Color.SkyBlue;

else if (m_b_enter) brush.Color = Color.DodgerBlue;

g.FillRectangle(brush, 0, 0, this.Width, this.Height);

g.DrawString(this.Text, this.Font, Brushes.White, this.ClientRectangle, base.m_sf);

}

}</pre>

</div>

当然为了代码尽可能的简洁按钮的效果写死在了代码中上面的代码仅仅是演示如何去构建一个自定义控件当然在这之前你需要具备一些GDI相关的知识

<GDI+程序设计>是一本不错的树

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_o'>案例 - 图像信息获取</h2></div>

<hr/>

在上述的ClockNode案例中对于数据的数据是通过代码写死在节点中的接下来这个案例通过上面编写的STNodeButton来获取数据进行输出

<pre class='pre_code'>public class ImageShowNode : STNode

{

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ImageShowNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

this.AutoSize = false;

this.Size = new Size(160, 150);

m_op_out = this.OutputOptions.Add("", typeof(Image), false);

var ctrl = new STNodeButton();

ctrl.Text = "Open Image";

ctrl.Location = new Point(5, 0);

ctrl.Size = new Size(150, 20);

this.Controls.Add(ctrl);

ctrl.MouseClick += new MouseEventHandler(ctrl_MouseClick);

}

void ctrl_MouseClick(object sender, MouseEventArgs e) {

OpenFileDialog ofd = new OpenFileDialog();

ofd.Filter = "*.png|*.png|*.jpg|*.jpg";

if (ofd.ShowDialog() != DialogResult.OK) return;

m_op_out.TransferData(Image.FromFile(ofd.FileName), true);

this.Invalidate();

}

protected override void OnDrawBody(DrawingTools dt) {

base.OnDrawBody(dt);//当然用户可以通过扩展"STNodeControl"编写一个"STNodePictureBox"控件来显示图片

Graphics g = dt.Graphics;

Rectangle rect = new Rectangle(this.Left + 5, this.Top + this.TitleHeight + 20, 150, 105);

g.FillRectangle(Brushes.Gray, rect);

if (m_op_out.Data != null)

g.DrawImage((Image)m_op_out.Data, rect);

}

}</pre>

</div>

接下来需要一个数据接收节点比如获取图像大小

<pre class='pre_code'>public class ImageSizeNode : STNode {

private STNodeOption m_op_in;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ImageSize";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

m_op_in = this.InputOptions.Add("--", typeof(Image), true);

m_op_in.DataTransfer += new STNodeOptionEventHandler(m_op_in_DataTransfer);

}

void m_op_in_DataTransfer(object sender, STNodeOptionEventArgs e) {

this.SetOptionText(m_op_in, "--");

} else {

Image img = (Image)e.TargetOption.Data;

this.SetOptionText(m_op_in, "W:" + img.Width + " H:" + img.Height);

}

}</pre>

</div>

通过点击Open Image按钮可以选择一张图片并在节点中显示在ImageSizeNode连接后就获取到了图像的大小

在上图中ImageChannel节点代码这里并没有给出代码在WinNodeEditorDemo工程中其作用为提取一张图像的RGB通道对于ImageShowNode而言它仅仅是提供了数据源并显示对于ImageSizeNode和ImageChannel节点而言它们并不知道会被什么节点连接它们仅仅是完成了各自的功能并将结果传递给了输出选项等待被下一个节点连接

而对于执行逻辑完全是由用户布线将它们的功能串在了一起开发期间节点与节点之间没有任何的交互唯一将它们牵扯在一起的是一个Image的数据类型这样一来节点与节点之间几乎不存在耦合关系

<h1 class='h_title anchor_point' anchor='a_p'>[基础]STNodeEditor</h1>

STNodeEditor作为STNode的容器同样提供了大量的属性与事件供开发者使用关于STNodeEditor更为详细的API列表请参考<a target='_bank' href='./doc.html'>帮助文档</a>

<hr/>

<hr/>

对于STNodeEditor中的节点以及连线的关系是可以文件持久化保存的

通过STNodeEditor.SaveCanvas(string strFileName)函数可以将画布中的内容持久化保存

需要注意的是SaveCanvas()系列函数会调用internal byte[] STNode.GetSaveData()函数来获取每个节点的二进制数据

而GetSaveData()函数并非将节点自身序列化 GetSaveData()函数会将节点自身的基础数据及原始属性进行二进制化然后调用virtual OnSaveNode(Dictionary<string, byte[]> dic)向扩展节点索要节点需要保存的数据

所以若有保存需求节点开发者可能需要通过重写OnSaveNode()函数来确保一些需要的数据能够被保存

关于更多节点保存的内容将会在后面的内容中介绍

<hr/>

<hr/>

通过STNodeEditor.LoadCanvas(string strFileName)函数可以从文件中加载保存的数据

若STNodeEditor存在其他程序集中的节点则需要通过调用STNodeEditor.LoadAssembly(string strFile)来加载程序集以确保文件中的节点能够被正确还原

因为还原过程并非序列化而是通过(STNode)Activator.CreateInstance(stNodeType)方式动态创建一个节点然后调用virtual OnSaveNode(Dictionary<string, byte[]> dic)对数据进行还原而dic则为OnSaveNode()所保存的数据

因为还原节点是通过反射动态创建节点的所以扩展的STNode中必须提供空参数构造器

关于更多节点加载的内容将会在后面的内容中介绍

<hr/>

<hr/>

ActiveChanged,SelectedChanged 可以监控控件中节点被选中的变化情况

<pre class='pre_code'>stNodeEditor1.ActiveChanged += (s, e) => Console.WriteLine(stNodeEditor1.ActiveNode.Title);

stNodeEditor1.SelectedChanged += (s, e) => {

foreach(var n in stNodeEditor1.GetSelectedNode()){

Console.WriteLine(n.Title);

}

};</pre>

</div>

如果希望在画布每次缩放后在编辑器上提示缩放比可以通过CanvasScaled事件获取

<pre class='pre_code'>stNodeEditor1.CanvasScaled += (s, e) => {

stNodeEditor1.ShowAlert(stNodeEditor1.CanvasScale.ToString("F2"),

Color.White, Color.FromArgb(127, 255, 255, 0));

};</pre>

</div>

如果希望画布中有节点连线时提示连线状态可以通过OptionConnected事件获取状态

<pre class='pre_code'>stNodeEditor1.OptionConnected += (s, e) => {

stNodeEditor1.ShowAlert(e.Status.ToString(), Color.White,

Color.FromArgb(125, e.Status ConnectionStatus.Connected ? Color.Lime : Color.Red));

};</pre>

</div>

<hr/>

<hr/>

/// 移动画布原点坐标到指定的控件坐标位置 (当不存在 Node 时候无法移动)

/// </summary>

/// <param name="x">X 坐标</param>

/// <param name="y">Y 坐标</param>

/// <param name="bAnimation">移动过程中是否启动动画效果</param>

/// <param name="ma">指定需要修改的坐标参数</param>

public void MoveCanvas(float x, float y, bool bAnimation, CanvasMoveArgs ma);</pre>

</div>

<hr/>

/// 缩放画布(当不存在 Node 时候无法缩放)

/// </summary>

/// <param name="f">缩放比例</param>

/// <param name="x">缩放中心X位于控件上的坐标</param>

/// <param name="y">缩放中心Y位于控件上的坐标</param>

public void ScaleCanvas(float f, float x, float y);</pre>

</div>

<hr/>

/// 向编辑器中添加默认数据类型颜色

/// </summary>

/// <param name="t">数据类型</param>

/// <param name="clr">对应颜色</param>

/// <param name="bReplace">若已经存在是否替换颜色</param>

/// <returns>被设置后的颜色</returns>

public Color SetTypeColor(Type t, Color clr, bool bReplace);</pre>

</div>

<hr/>

/// 在画布中显示提示信息

/// </summary>

/// <param name="strText">要显示的信息</param>

/// <param name="foreColor">信息前景色</param>

/// <param name="backColor">信息背景色</param>

/// <param name="nTime">信息持续时间</param>

/// <param name="al">信息要显示的位置</param>

/// <param name="bRedraw">是否立即重绘</param>

void ShowAlert(string strText, Color foreColor, Color backColor, int nTime, AlertLocation al, bool bRedraw);

//e.g.

stNodeEditor1.ShowAlert("this is test info", Color.White, Color.FromArgb(200, Color.Yellow));</pre>

</div>

关于STNodeEditor更多的属性函数事件请参考<a target='_bank' href='./doc.html'>API文档</a> 此文档更注重于与STNode相关的内容及演示

<h1 class='h_title anchor_point' anchor='a_u'>STNodePropertyGrid</h1>

STNodePropertyGrid是随着类库一起发布的另一个控件可以与STNodeEditor结合使用

STNodePropertyGrid一共有两个面板通过右上角的按钮可以进行切换分别是属性面板与节点信息面板

仅存在属性与节点信息才会显示对应面板

<hr/>

<hr/>

STNodePropertyGrid的核心方法为SetNode(STNode)通常与STNodeEditor绑定使用

<pre class='pre_code'>stNodeEditor1.ActiveChanged += (s, e) => stNodePropertyGrid1.SetNode(stNodeEditor1.ActiveNode);</pre>

</div>

既然叫做属性编辑器必然和STNode的属性相关 STNode作为一个普通的class当然也可以是拥有属性的而STNodePropertyGrid就是展示并修改它们就像在WinForm开发时候UI设计器中所看到的一样

接下来编写一个节点试一下

<pre class='pre_code'>public class PropertyTestNode : STNode {

private int _Number;

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

}</pre>

</div>

发现并没有看到想象中的画面并没有显示Number属性

与System.Windows.Forms.PropertyGrid不同的是PropertyGrid会显示class中的所有属性而STNodePropertyGrid并没有采用这样的设计方案

S T N O D E PropertyGrid 这个是STNodePropertyGrid并不会随便的显示一个属性因为作者认为开发者可能并不希望STNode中的所有属性都被显示出来即使需要显示出来开发者可能也并不希望在属性窗口看到的是Number而是一个别的名字毕竟Number是写代码时候用的

只有被STNodePropertyAttribute特性所标记的属性才会被STNodePropertyGrid显示

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_w'>STNodePropertyAttribute</h2></div>

<hr/>

STNodePropertyAttribute拥有三个属性NameDescriptionDescriptorType

Name - 对于此属性希望在STNodePropertyGrid上显示的名称

Description - 当鼠标左键在STNodePropertyGrid上长按属性名称时候希望显示的描述信息

DescriptorType - 决定属性如何与属性窗口进行数据交互将在稍后讲解此属性

STNodePropertyAttribute构造函数为STNodePropertyAttribute(string strName,string strDescription)

{

private int _Number;

[STNodeProperty("Name", "Description for this property")]

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

}</pre>

</div>

此时就能看到属性被正确的显示了并且可以被设置而且左键长按属性名称会显示描述信息

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_x'>STNodeAttribute</h2></div>

<hr/>

若希望显示节点信息则STNode需要被STNodeAttribute特性标记

<pre class='pre_code'>[STNode("AA/BB", "Author", "Mail", "Link", "Description")]

public class PropertyTestNode : STNode

{

private int _Number;

[STNodeProperty("Name", "Description for this property")]

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

}</pre>

</div>

通过右上角的按钮可进行面板切换

其中AA/BB用于在STNodeTreeView中构建路径使用

<pre class='pre_code'>stNodePropertyGrid1.SetInfoKey("Author", "Mail", "Link", "Show Help");</pre>

</div>

信息面板内容的key可通过SetInfoKey()函数来设置语言默认简体中文显示

<hr/>

<hr/>

上面一个信息面板案例中可以看到查看帮助按钮不可用若希望可用则需要提供魔术方法

public class PropertyTestNode : STNode

{

private int _Number;

[STNodeProperty("Name", "Description for this property")]

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

/// <summary>

/// 此方法为魔术方法

/// 若存在 static void ShowHelpInfo(string) 且此类被STNodeAttribute标记

/// 则此方法将作为属性编辑器上查看帮助功能

/// </summary>

/// <param name="strFileName">此类所在的模块所在的文件路径</param>

public static void ShowHelpInfo(string strFileName) {

MessageBox.Show("this is -> ShowHelpInfo(string);\r\n" + strFileName);

}

}</pre>

</div>

此时发现查看帮助按钮变成了启用状态 STNodeAttribute还提供了两个static函数

/// 获取类型的帮助函数

/// </summary>

/// <param name="stNodeType">节点类型</param>

/// <returns>函数信息</returns>

public static MethodInfo GetHelpMethod(Type stNodeType);

/// <summary>

/// 执行对应节点类型的帮助函数

/// </summary>

/// <param name="stNodeType">节点类型</param>

public static void ShowHelp(Type stNodeType);</pre>

</div>

<hr/>

<hr/>

既然STNodePropertyGrid可以显示并修改属性那么接下来这个案例将通过属性窗口来提供一个数据的输入

<pre class='pre_code'>public class NumberInputNode : STNode

{

private int _Number;

[STNodeProperty("Input", "Input number")]

public int Number {

get { return _Number; }

set {

_Number = value;

this.SetOptionText(m_op_out, value.ToString());

m_op_out.TransferData(value);

}

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "NumberInput";

m_op_out = this.OutputOptions.Add("0", typeof(int), false);

}

}</pre>

</div>

<pre class='pre_code'>public class NumberAddNode : STNode {

private STNodeOption m_op_in_1;

private STNodeOption m_op_in_2;

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "NumberAdd";

m_op_in_1 = this.InputOptions.Add("0", typeof(int), true);

m_op_in_2 = this.InputOptions.Add("0", typeof(int), true);

m_op_in_1.DataTransfer += new STNodeOptionEventHandler(m_op_in_DataTransfer);

m_op_in_2.DataTransfer += new STNodeOptionEventHandler(m_op_in_DataTransfer);

}

void m_op_in_DataTransfer(object sender, STNodeOptionEventArgs e) {

if (sender == m_op_in_1) m_op_in_1.Data = 0;

if (sender == m_op_in_2) m_op_in_2.Data = 0;

} else {

if (sender == m_op_in_1) m_op_in_1.Data = e.TargetOption.Data;

if (sender == m_op_in_2) m_op_in_2.Data = e.TargetOption.Data;

}

if (m_op_in_1.Data == null) m_op_in_1.Data = 0;

if (m_op_in_2.Data == null) m_op_in_2.Data = 0;

int nResult = (int)m_op_in_1.Data + (int)m_op_in_2.Data;

this.SetOptionText(m_op_in_1, m_op_in_1.Data.ToString());

this.SetOptionText(m_op_in_2, m_op_in_2.Data.ToString());

this.SetOptionText(m_op_out, nResult.ToString());

m_op_out.TransferData(nResult);

}

}</pre>

</div>

通过Number属性的set访问器将输入的数字向下传递

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_a'>ReadOnlyModel</h2></div>

<hr/>

某些情况下并不希望STNodePropertyGrid对属性进行设置仅仅希望展示属性则可以启用ReadOnlyModel

<pre class='pre_code'>stNodePropertyGrid1.ReadOnlyModel = true;</pre>

</div>

在ReadOnlyModel下属性无法通过STNodePropertyGrid被设置

<h1 class='h_title anchor_point' anchor='b_b'>STNodePropertyDescriptor</h1>

上面介绍了STNodePropertyAttribute的Name和Description属性还有第三个属性DescriptorType其数据类型为Type 默认值为typeof(STNodePropertyDescriptor)

虽然从目前的案例来看上面的操作没有任何问题但是并不是所有数据类型的属性都能够正确的被STNodePropertyGrid所支持默认的STNodePropertyDescriptor仅支持下列数据类型

intfloatdoubleboolstringEnum以及它们的Array

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_c'>失败案例 - ColorTestNode</h2></div>

<hr/>

下面创建一个节点添加一个Color类型的属性

<pre class='pre_code'>public class ColorTestNode : STNode

{

[STNodeProperty("TitleColor", "Get or set the node TitleColor")]

public Color ColorTest {

get { return this.TitleColor; }

set { this.TitleColor = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "ColorNode";

}

}</pre>

</div>

运行上述代码会发现通过STNodePropertyGrid对属性进行进行设置会出现错误而且STNodePropertyGrid中对于属性的值显示也很奇怪

即便System.Windows.Forms.PropertyGrid能支持很多数据类型但也并非万能比如当属性类型是用户自定义类型时候属性编辑器根本无法知道要如何与图形化界面上的属性交互

对于System.Windows.Forms.PropertyGrid的解决方案便是提供TypeConverter将目标类型用TypeConverter标记并实现重写这样一来PropertyGrid通过TypeConverter就能够知道如何与图形化界面进行交互

而STNodePropertyGrid提供的解决方案便是STNodePropertyDescriptor

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_d'>关于属性描述器</h2></div>

<hr/>

之所以STNodePropertyGrid能够正确的获取以及修改STNode属性的值全是依靠STNodePropertyDescriptor在中间做交互进行数据的转换以及响应属性窗口上的一些行为操作

被STNodePropertyAttribute标记的属性都会包装成STNodePropertyDescriptor传递给STNodePropertyGrid 一个STNodePropertyDescriptor包含了STNodePropertyAttribute中的NameDescription以及属性将会在STNodePropertyGrid上显示的位置信息等以及如何响应鼠标事件或键盘事件等

可以理解为STNodePropertyDescriptor是每个被STNodePropertyAttribute所标记属性的图形化界面接口而主要作用则为在图形界面和真实属性之间传递数据

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_e'>GetValueFromString()</h2></div>

<hr/>

/// 将字符串形式的属性值转换为属性目标类型的值

/// 默认只支持 int float double string bool 以及上述类型的Array

/// 若目标类型不在上述中请重写此函数自行转换

/// </summary>

/// <param name="strText">字符串形式的属性值</param>

/// <returns>属性真实目标类型的值</returns>

protected internal virtual object GetValueFromString(string strText);</pre>

</div>

GetValueFromString()函数主要负责将用户在STNodePropertyGrid中输入字符串转换为对应属性需要的真实值

如: 假若属性是int类型值而用户在STNodePropertyGrid中只能输入字符串的123那么默认的GetValueFromString()函数内部则会int.Parse(strText)这样string类型的123就变成了int类型的123

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_f'>GetStringFromValue()</h2></div>

<hr/>

/// 将属性目标类型的值转换为字符串形式的值

/// 默认对类型值进行 ToString() 操作

/// 如需特殊处理请重写此函数自行转换

/// </summary>

/// <returns>属性值的字符串形式</returns>

</div>

GetStringFromValue()函数主要负责将属性值转换为字符串的方式在STNodePropertyGrid中显示默认的GetStringFromValue()内部仅仅是对属性的值ToString()操作

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_g'>成功案例 - ColorTestNode</h2></div>

<hr/>

对上面失败案例的ColorTestNode.ColorTest的STNodePropertyDescriptor进行扩展

<pre class='pre_code'>public class ColorTestNode : STNode

{

//指定使用扩展的 STNodePropertyDescriptor 以便完成对 Color 类型的支持

[STNodeProperty("TitleColor", "Get or set the node TitleColor", DescriptorType = typeof(ColorDescriptor))]

public Color ColorTest {

get { return this.TitleColor; }

set { this.TitleColor = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "ColorNode";

}

}

public class ColorDescriptor : STNodePropertyDescriptor

{

protected override object GetValueFromString(string strText) {

string[] strs = strText.Split(',');

return Color.FromArgb(int.Parse(strs[0]), int.Parse(strs[1]), int.Parse(strs[2]), int.Parse(strs[3]));

//return base.GetValueFromString(strText);

}

protected override string GetStringFromValue() {

var v = (Color)this.GetValue(null);//获取当前属性值

return v.A + "," + v.R + "," + v.G + "," + v.B;

//return base.GetStringFromValue();

}

}</pre>

</div>

此时就能够正确的显示与设置属性值了因为GetValueFromString()与GetStringFromValue()正确的完成了属性值与字符串之间的转换

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_h'>高级案例 - ColorTestNode</h2></div>

<hr/>

上面的案例虽然可以通过设置Color的ARGB来完成对属性值的设置但是明显这样的方式并不够友好

是否能够像System.Windows.Forms.PropertyGrid一样能够让用户进行可视化的选择 STNodePropertyDescriptor当然也能办到

STNodePropertyDescriptor可以视作是一个显示属性的自定义控件既然是自定义控件那么就具备了鼠标事件的响应

下面对ColorDescriptor增加一些代码

<pre class='pre_code'>public class ColorDescriptor : STNodePropertyDescriptor

{

private Rectangle m_rect;//此区域用作属性窗口上绘制颜色预览

string[] strs = strText.Split(',');

//return base.GetValueFromString(strText);

}

protected override string GetStringFromValue() {

var v = (Color)this.GetValue(null);

//return base.GetStringFromValue();

}

//当此属性在属性窗口中被确定位置时候发生

protected override void OnSetItemLocation() {

base.OnSetItemLocation();

Rectangle rect = base.RectangleR;

m_rect = new Rectangle(rect.Right - 25, rect.Top + 5, 19, 12);

}

//绘制属性窗口值区域时候调用

protected override void OnDrawValueRectangle(DrawingTools dt) {

base.OnDrawValueRectangle(dt);//先采用默认的绘制再绘制颜色预览

dt.SolidBrush.Color = (Color)this.GetValue(null);

dt.Graphics.FillRectangle(dt.SolidBrush, m_rect);//填充颜色

dt.Graphics.DrawRectangle(Pens.Black, m_rect); //绘制边框

}

protected override void OnMouseClick(MouseEventArgs e) {

//如果用户点击在颜色预览区域则弹出系统颜色对话框

if (m_rect.Contains(e.Location)) {

ColorDialog cd = new ColorDialog();

if (cd.ShowDialog() != DialogResult.OK) return;

this.SetValue(cd.Color, null);

this.Invalidate();

return;

}

//否则其他区域将采用默认处理方式弹出字符串输入框

base.OnMouseClick(e);

}

}</pre>

</div>

此时可以看到与上一个案例相比多了一个颜色预览区域并且鼠标点击预览区域会弹出系统颜色对话框对属性值进行设置如果在非预览区域点击则会使用默认操作方式手动输入ARGB

关于STNodePropertyDescriptor还有两个重要虚函数GetBytesFromValue()SetValue(byte[])将会在后面保存画布中进行介绍

<h1 class='h_title anchor_point' anchor='b_i'>STNodeTreeView</h1>

STNodeTreeView与STNodePropertyGrid一样是随着类库一起发布的另一个控件可以与STNodeEditor结合使用

STNodeTreeView中的节点可直接拖拽进STNodeEditor中并且提供预览和检索功能

View remainder of file in raw view

FilesExpand file tree

tutorials_cn.html

Latest commit

History

tutorials_cn.html

File metadata and controls