爱刨根知识网

  1. 首页 > 经验知识 > >

WPF+SkiaSharp实现自绘拖曳小球

生活经验知识分享


拖曳小球 wpf的拖曳效果 ， 基本配置一下 ， 就可以了 ， 但是自绘的话 ， 就得自己控制 ， 按键点击 ， 按键移动和按键松开的事件 ， 与其配合达到目的 。
这个效果实现了 ， 其实也变相的实现了wpf里的拖动效果 ， 这个效果用着还是很方便的 。
但是代码 ， 确十分的简单 。
wpf 和 skiasharp 新建一个wpf项目 ， 然后 ， nuget包即可
要添加nuget包
install-package skiasharp.views.wpf -version 2.88.0其中核心逻辑是这部分 ， 会以我设置的60fps来刷新当前的画板 。
skcontainer.paintsurface += skcontainer_paintsurface;_ = task.run(() =>{while (true){try{dispatcher.invoke(() =>{skcontainer.invalidatevisual();});_ = spinwait.spinuntil(() => false, 1000 / 60);//每秒60帧}catch{break;}}});
实现代码 【WPF+SkiaSharp实现自绘拖曳小球】鼠标按下 ， 移动 ， 鼠标松开
先对skiasharp对象 ， 增加相关事件
skcontainer.mousedown += skcontainer_mousedown;skcontainer.mouseup += skcontainer_mouseup;skcontainer.mousemove += skcontainer_mousemove;然后增加相关事件处理代码 ， 我这边都统一处理了.
private void skcontainer_mousedown(object sender, mousebuttoneventargs e){var cur = e.getposition(sender as iinputelement);drawclock.mousedown(new skpoint((float)cur.x, (float)cur.y), true);}private void skcontainer_mouseup(object sender, mouseeventargs e){var cur = e.getposition(sender as iinputelement);drawclock.mousedown(new skpoint((float)cur.x, (float)cur.y), false);}private void skcontainer_mousemove(object sender, mouseeventargs e){var cur = e.getposition(sender as iinputelement);drawclock.mousemove(new skpoint((float)cur.x, (float)cur.y));}拖曳核心类
/// <summary>/// 拖曳 /// </summary>public class drag{public skpoint centerpoint;public int radius = 0;private bool pressed = false;private bool circlepressend = false;private skpoint skpoint = skpoint.empty;private skpoint circlepoint = skpoint.empty;private skcanvas canvas;private float dx = 0;private float dy = 0;/// <summary>/// 渲染/// </summary>public void render(skcanvas canvas, sktypeface font, int width, int height){this.canvas = canvas;centerpoint = new skpoint(width / 2, height / 2);this.radius = 40;canvas.clear(skcolors.white);if (circlepoint.isempty){circlepoint = new skpoint(centerpoint.x, centerpoint.y);}if (circlepressend){circlepoint = new skpoint(skpoint.x - dx, skpoint.y - dy);drawcircle(this.canvas, circlepoint);}else{drawcircle(this.canvas, circlepoint);}using var paint = new skpaint{color = skcolors.black,isantialias = true,typeface = font,textsize = 24};var msg = $"x:{ skpoint.x}y:{skpoint.y}pressed:{pressed} circlepressend:{circlepressend}";canvas.drawtext(msg, 0, 30, paint);}public void mousemove(skpoint skpoint){this.skpoint = skpoint;if (circlepressend)//按下 ， 就开始拖动{circlepoint = skpoint;}}public void mousedown(skpoint skpoint, bool pressed){this.skpoint = skpoint;this.pressed = pressed;if (this.pressed){this.circlepressend = checkpoint(skpoint, circlepoint);if (this.circlepressend){dx = skpoint.x - circlepoint.x;dy = skpoint.y - circlepoint.y;}}else{this.circlepressend = false;}}public bool checkpoint(skpoint skpoint, skpoint circlepoint){var d = math.sqrt(math.pow(skpoint.x - circlepoint.x, 2) + math.pow(skpoint.y - circlepoint.y, 2));return this.radius >= d;}/// <summary>/// 画一个圆/// </summary>public void drawcircle(skcanvas canvas, skpoint skpoint){using var paint = new skpaint{color = skcolors.blue,style = skpaintstyle.fill,isantialias = true,strokewidth = 2};canvas.drawcircle(skpoint.x, skpoint.y, radius, paint);}}
效果如下
我可以点的球的边边哦 ， 这也是一个小技巧 ， 点到球哪里 ， 停止的时候 ， 鼠标还在那个位置 ， 是不是有点像拖动窗体的感觉了 。
到此这篇关于wpf+skiasharp实现自绘拖曳小球的文章就介绍到这了,更多相关wpf skiasharp拖曳小球内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
-- 展开阅读全文 --

    推荐阅读


    上一篇：Android实现简单实用的垂直进度条

    下一篇：Android图片加载框架Coil的详细使用总结