html中的rect_-[NSAttributedString boundingRectWithSize] html的rect错误_如何在Canvas rect中检查UI rect - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

画布就是一切（一）— 画布编程的基本模式

我开发过基于QT的客户端程序、基于C# WinForm客户端，开发过Java后端服务，此外，前端VUE和React我也开发过不少。对应我所开发过的东西，比起一行一行冰冷的代码，我更加迷恋哪些能够直观的，可视化的东西。还记得以前在开发C#的时候，接触过一个的C# WinForm库NetronGraphLib，这个库能够让我们轻松的构建属于自己的流程图绘制软件，让我们能够以拖拉拽的方式来构建图（下图就是NetronGraphLib库的官方示例应用Cobalt）：

02

D3.js库-5-做一个简单的图形

SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形。SVG的几个特点

02

您找到你想要的搜索结果了吗？

是的

没有找到

有了Omi，在小程序中渲染SVG再也不慌了！

经过腾讯 Omi 团队的努力，今天你可以在小程序中使用 Cax 引擎高性能渲染 SVG！

04

画布就是一切（一）— 画布编程的基本模式

我开发过基于QT的客户端程序、基于C# WinForm客户端，开发过Java后端服务，此外，前端VUE和React我也开发过不少。对应我所开发过的东西，比起一行一行冰冷的代码，我更加迷恋哪些能够直观的，可视化的东西。还记得以前在开发C#的时候，接触过一个的C# WinForm库NetronGraphLib，这个库能够让我们轻松的构建属于自己的流程图绘制软件，让我们能够以拖拉拽的方式来构建图（下图就是NetronGraphLib库的官方示例应用Cobalt）：

02

画布就是一切（一）— 画布编程的基本模式

我开发过基于QT的客户端程序、基于C# WinForm客户端，开发过Java后端服务，此外，前端VUE和React我也开发过不少。对应我所开发过的东西，比起一行一行冰冷的代码，我更加迷恋哪些能够直观的，可视化的东西。还记得以前在开发C#的时候，接触过一个的C# WinForm库NetronGraphLib，这个库能够让我们轻松的构建属于自己的流程图绘制软件，让我们能够以拖拉拽的方式来构建图（下图就是NetronGraphLib库的官方示例应用Cobalt）：

01

一篇文章带你了解SVG javascript脚本

使用JavaScript，可以编写SVG脚本。通过脚本编写，可以修改SVG元素，为其设置动画或侦听形状上的鼠标事件。

02

使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏

网页使用loading可以给用户带来更好的体验，避免网页渲染中长时间出现网页整体空白从而影响访客的体验，loading在部分大型APP也有在应用。

04

基于HTML5 Canvas实现用户交互

很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（http://www.hightopo.com/guide/guide/core

08

兼容IE、新版Chrome、Firefox，实现本地图片等比例缩放预览

以前转载过一篇《兼容IE8、火狐的本地图片预览+等比例缩放》的文章，时至今日在新版的Chrome和Firefox上已经不能用了，原因getAsDataURL方法已经失效。当然在Chrome、Firefox上可以通过HTML5来实现，今天把它写出来了，见源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

02

Internet Explorer漏洞分析(二)——CVE-2013-2551

1.本文一共2850个字 29张图预计阅读时间11分钟2.本文作者erfze 属于Gcow安全团队复眼小组未经过许可禁止转载3.本篇文章从CVE-2013-2551漏洞的分析入手详细的阐述漏洞的成因以及如何去利用该漏洞4.本篇文章十分适合漏洞安全研究人员进行交流学习5.若文章中存在说得不清楚或者错误的地方欢迎师傅到公众号后台留言中指出感激不尽

03

基于HTML5 Canvas实现用户交互

很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html）写了个Demo进行示例。场景如下所示，在该场景中双击温度和湿度下的Node，会生成输入框供用户填写内容，这之后，用户按下“Enter”键可以将输入内容传到Node中，同时删除输入框，地址：：http://www.hightopo.com/dem

02

HTML5-嵌入内容

img元素允许我们在HTML文档里嵌入图像。图像在HTML标记处理完毕后才加载！！

06

SVG绘图-SVG.js

官方文档：https://svgjs.dev/docs/3.0/getting-started/

07

鼠标框选下篇

接上篇，上篇写了大致的思路，其实还有很多问题，由于没写测试，在运行时出现了很多问题，比如绘制相关代码，会一直添加元素到dom，这主要因为我在考虑元素绘制和插入dom没有分开处理，本次主要增加了计算和绘制的代码逻辑，逻辑中有些代码还是需要优化的，比如dom访问次数过多,绘制过程做节流处理等，有需要各位自行优化即可，为了操作方便，直接封装成了jQuery插件。

01

VC如何获取对话框中控件的坐标

VC如何获取对话框中控件的坐标 GetWindowRect是取得窗口在屏幕坐标系下的RECT坐标（包括客户区和非客户区），这样可以得到窗口的大小和相对屏幕左上角(0,0)的位置。 GetClientRect取得窗口客户区(不包括非客户区)在客户区坐标系下的RECT坐标,可以得到窗口的大小，而不能得到相对屏幕的位置，它的top和left都为0，right和botton是宽和高，因为这个矩阵是在客户区坐标系下（相对于窗口客户区的左上角）的。　　 ClientToScreen把客户区坐标系下的RECT坐标转换为屏

09

使用JavaScript和D3.js实现数据可视化

D3.js是一个JavaScript库。它的全称是Data-Driven Documents（数据驱动文档），并且它被称为一个互动和动态的数据可视化库网络。2011年2月首次发布，在撰写本文时，最新的稳定版本是4.4版本，并且不断更新。D3利用可缩放矢量图形或SVG格式，允许您渲染可放大或缩小的形状，线条和填充，而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。

03

map&area标签实现图片热点区域点击

在购物网站 Landing page 页，往往会存在商品宣传信息，为提升首页加载速度，往往会使用一张图片来包含所有要展示商品（① 减少http请求个数；② 减少页面DOM数）。如何在一张商品海报上，实现点击某商品，跳转到该商品详情页面？

01

SVG绘图表格统计

用SVG绘图写一个表格统计的效果，类似于百度图表工具Echarts实现的效果。实现效果如下：实现代码如下： <!DOCTYPE html> <html> <head lang="zh-cn">

02

前端懒加载和预加载

懒加载和预加载的目的都是为了提高用户的体验，二者行为是相反的，一个是延迟加载，另一个是提前加载。懒加载对缓解服务器压力有一定作用，预加载则会增长服务器前端压力缓存。

02

SVG - 动画制作

SVG - 动画制作 HTML5学堂：SVG - 动画制作。上一篇文章讲解了SVG的基本属性，大家能够利用SVG的基本属性进行绘制图像，那么如何让绘制好的图像动起来呢？今天要给大家分享的是SVG的动画制作，具体我们来看看下面的内容吧。接触过HTML5的人，都知道，Canvas实现一个动画，需要不断的清除画布再重新绘制，如果没有接触过Canvas也不要紧，SVG之后我们紧接着要为大家介绍的就是Canvas。SVG提供了比较方便的API接口，动画实现起来比较方便，具体看看下面的动画命令。 SVG 动画基本命

一篇文章带你了解SVG <clippath>剪切路径

SVG剪切路径（也称为SVG剪切）用于根据特定路径剪切SVG形状。路径内部的形状部分可见，外部的部分不可见。

01

javascript当中MapArea的用法

4.MapArea 例 4.1（MapAreaShapeIEFF.html） <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <body> <map name="qixymap" id="pmap"> </map> < p>马克-to-win：注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标 b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数更多请见：https://blog.csdn.net/qq_43650923/article/details/102646475

03

SVG绘制渐变对象

运用SVG实现一个渐变对象效果。实现效果如下：实现代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

03

可视化初探上

作为前端工程师，很多人的主要工作就是和网页打交道。那扪心自问一下，写了这么多网页之后，你是不是也想要做些尝试或者突破呢？如果是的话，我建议大家试试可视化。

06

【D3使用教程】(6) 交互操作之事件监听

在之前的文章中写到，为了让图表具有交互能力，我们必须针对一些事件来编写代码，以便监听某些DOM元素发生的这些事件。

01

活动可视化搭建（拖拽生成页面）

公司经常为了活动推广营销，拉新留存，制作临时活动页面，且组件大体相似，为了提高运营的工作效率，减少开发成本，基于此开发一个活动可视化搭建项目，让运营可以通过，点击和拖拽组件，选择或导入数据的的方式，快速生成活动页面上线，在此做一个小小的总结。

00

前端动画实现总结

SVG动画由SVG元素内部的元素属性控制，一般通过一下几个元素控制： - 用于控制动画延时 - 对属性的连续改变进行控制 - 颜色变化，但用就能控制 - 控制如缩放、旋转等几何变化 - 控制SVG内元素的移动路径

01

SVG绘图

前言图形 SVG <svg id="test_1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="600" height="400" viewBox="0 0 300 200"> <g style="fill:#d2fae3;stroke:#82eeb5;stroke-width:1"> <rect x="10" y="10" width="100" he

03

你究竟了解多少HTML代码

今天想学习一下基础知识，就看了一下HTML(4.0)，发现自己对HTML掌握的太少了。很多代码都很陌生，根本就没见过，更别提用了。

03

ai基础教程入门_绘画入门基础教程

，这次写博客是因为应一位同学的要求，写一下GSAP JS的一个小教程。为什么说小呢？因为它实际上就是小，只是一个入门级的小教程。如果你想问：“那你为什么不写详细一点呢？”，我想说，说.,说..，“因为我也不懂，哈哈

03

SVG可伸缩的矢量图形「建议收藏」

SVG可伸缩的矢量图形 SVG是对画该图形时的一些路径，做出精准的，必要的与分辨率无关的一种描述。即对矢量图的描述在此安利一个svg绘图的网址，可以直接手动绘图，然后生成相关的svg描述，即可实现图片

01

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径，做出精准的，必要的与分辨率无关的一种描述。即对矢量图的描述

03

【前端动画】实现动画的6种方式

javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。（❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~）

01

一篇文章教会你使用SVG 填充图案

SVG填充图案用于用由图像组成的图案填充形状。该图案可以由SVG图像（形状）或位图图像组成。SVG填充模式看起来就像从Photoshop等中所习惯的那样，被称为“平铺”。

01

基于HT for Web矢量实现HTML5文件上传进度条

09

一篇文章带你了解SVG <use> 元素

SVG <use>元素可以重用SVG文档中其他位置（包括 <g>元素和 <symbol>元素）的SVG形状。可以在 <defs>元素内部（使形状直到使用之前不可见）或外部定义重用形状。

01

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件

02

把图像热区跟链接关联起来

在《Sample XHTML 1.0 document》里看到图像热区也可以跟链接关联到一起，即点热区和点链接是一样的地址。看下具体的玩法。

03

内嵌Activex的Activex插件开发

介绍：　　如今在许多流媒体视频网站（youku,tudou......）我们都会发现，观看视频之前都会有一段时间的广告，甚至在观看视频途中也会插入一些广告。实现这个效果的可以有多种技术。使用Javascript就可以实现，只需要在同一个位置分别创建两个Object，一个嵌入Flash插件，一个嵌入 WMP插件，然后切换显示这两个控件即可。　　使用COM/Activex技术也可以在同一个控件中实现这样的功能。插件功能描述：　　上周在某个公司碰到这么一个问题，它们需要创建一个插件，内部嵌入一个Flash插件和Windows Media Player插件。然后写一个Web测试页面测试此Activex页面。页面上有三个输入框和一个按钮（Play）。第一个输入框输入falsh URL（.swf）,第二个输入框输入.swf播放时间长度（秒），即视频广告时间,第三个输入框输入.wmv URL。点击Play按钮后，页面按钮将三个参数传递给控件，控件优先播放.swf，要布满整个控件的大小。.swf播放指定的时间之后，然后播放.wmv，wmv也要布满整个控件。

03

HTML5矢量实现文件上传进度条

08

HTML5矢量实现文件上传进度条

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件

04

关于ModifyStyle ModifyStyleEx修改自定义控件的问题[通俗易懂]

继承于MFC控件，比如CStatic CEdit等等，在自定义代码中许多人反映无法更改控件的外观属相，这是因为大部分人没有通知主窗体自定义控件的外观更改了，可以使用下列代码进行更改：

05

Silverlight数据绑定/IValueConverter学习笔记

先回忆一下aspx中的处理: 在aspx中，可以直接在后台定义一个变量，然后前台就可以用<%=xxx%>来将其"绑定"html控件上，比如下面这样，实在是很方便: using System; namespace WebApplication1 { public partial class _Default : System.Web.UI.Page { protected string _Test = DateTime.Now.ToString(); protected void Page_

07

通过游戏学javascript系列第一节Canvas游戏开发基础

HTML5引入了canvas元素。canvas元素为我们提供了一块空白画布。我们可以使用此画布来绘制和绘制我们想要的任何东西。JavaScript为我们提供了动态制作动画并绘制到画布上所需的工具。它不仅提供绘图和动画系统，还可以处理用户交互。在本教程中，我们将使用纯JavaScript制作基本的HTML5 Canvas框架，该框架可用于制作真实的游戏。在本教程的结尾创建了一个非常简单的游戏，以演示HTML5 Canvas与JavaScript结合的优势。

01

javascript当中Map Area Shape 和onmousemove的用法

例 4.2（MapAreaShapeMouseMoveIEFF.html） <html> <head> <title> img hidefocus="true"必须加,否则ie8中点击map后，会粗线一个contour，轮廓线</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function showTip(event,txt) { var newDiv = document.getElementById('newDiv'); newDiv.style.display="block"; //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标 newDiv.style.left=event.clientX+10; //必须加上10，如果不加10的话，老会闪烁 newDiv.style.top=event.clientY+5; newDiv.style.position="absolute"; //必须指定这个属性，否则newDiv层无法跟着鼠标动 newDiv.innerHTML="

" + txt + "

";; } function closeTip() { var newDiv = document.getElementById('newDiv'); newDiv.style.display="none"; } </script> <style type="text/css"> </style> </head> <body>

<map name="qixyplanetmap" id="planetmap"> </map> < p>马克-to-win：注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标

01

svg.js教程及使用手册详解（一）

做毕设的时候，因为要使用到画图和自定义动画，所以接触到了SVG。网上关于SVG和Canvas的对比很多，具体的辨析这里就不赘言。网上关于SVG的所谓教程基本上都是SVG本身，但是却没有一个针对svg.js这样的集成的SVG库进行具体讲解的教程，做这件事的，本文应该是第一篇，也是给那些需要动态的使用SVG的兄弟们一点帮助。

02

使用JointJS绘制流程图1

依赖：jquery，lodash，backbone 如果使用自动排版，需要添加依赖：dagre，graphlib

02

Chrome XSS审计之SVG标签绕过

在一年前,在我的私人Twitter账户 brutal secret ,我分享了一个有趣的方法来通过审计绕过chrome 的xss过滤器。我们将从黑盒测试的角度来观察,一个逻辑假设和结论, 导致我们的 XSS 向量绕过了xss过滤器。我们从已知的所有 XHTML 解析器 (浏览器) 的麻烦开始: Scalable_Vector_Graphics(svg):如果你不知道svg可以干什么,点击这里深入了解信息（点击阅读原文查看链接）我们需要知道的是, SVG 标记比简单的 XML/HTML 更复杂, 并且

05

你被追尾了

被追尾了，严格来讲，就是你的汽车和别人的汽车发生了碰撞. 所以本文来介绍一些检测碰撞的算法.

03

碰撞检测的向量实现

注：1、本文只讨论2d图形碰撞检测。2、本文讨论圆形与圆形，矩形与矩形、圆形与矩形碰撞检测的向量实现

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭