canvas
关注
分享
扫一扫
文章平均质量分 83
IT 哈
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
canvas详解（2）-事件处理
canvas详解（2）-事件处理上一章我们讲解了canvas的基本原理应用，这一章主要讲解一下事件如何处理。 canvas详解（1）-原理canvas因为是画布的原因，实际上我们可以将它当做一张图片，所以在html中，无论这个canvas包含多少元素，多少图形，他都只有一个tag显示。那么它当中的图形事件也只能添加到canvas元素自身上了。既然所有的的事件都只能添加到canvas元素上，那么怎么区分各个图形的事件呢?根据坐标，根据每个图形在画布上不同的坐标来区分每个图形对应的事件。这就需要大转载 2021-05-21 15:41:40 · 2117 阅读 · 0 评论 -
canvas详解（1）-原理
canvas详解(1)-原理原理canvas本身并不具备绘画能力，它本身只是一个画布，是一个容器。绘图能力是基于html5的getContext("2d")返回的CanvasRenderingContext2D对象来完成的。const canvas = document.getElementById("payAbilityLoginTree");//获取canvas dom对象const ctx = canvas.getContext('2d'); //获取绘图对象<can转载 2021-05-21 15:34:23 · 1303 阅读 · 1 评论 -
用 canvas 制作简易版组态 联动连接工具
效果如下，拖动任意一个，连线会随着动，（连线连的比较随意，后期换别的版本了，就没继续做下去）1.1 支持任意添加1.2 支持右键删除1.3 支持联动使用说明：1.点击图片添加图片2.进入连线模式侯才可以连线<!DOCTYPE html><html><head> <title>鼠标滚轮</title> <meta charset="utf-8"> <style> .转载 2021-05-02 10:44:01 · 889 阅读 · 0 评论 -
echarts name 坐标轴_从零打造Echarts —— v1 ZRender和MVC
从零打造Echarts —— v1 ZRender和MVC本篇开始进入正文。写在前面图形、元素、图形元素，都指的是XElement，看情况哪个顺口用哪个。ts可能会报警告，我只是想用代码提示功能而已，就不管辣么多了。文内并没有贴出所有代码，且随着版本更迭，可能有修改不及时导致文内代码和源码不一致的情况，可以参考源码进行查看。源码查看的方式，源码放在这里，每一个版本都有对应的分支。由于水平所限，以及后续设计的变更，无法在最开始的版本中就写出最优的代码，甚至可能还会存在一些问题，如果遇到你认为不转载 2021-05-02 10:36:29 · 374 阅读 · 0 评论 -
zrender 知识：使用zrender搭建流程图工具
首先看下最终的效果图：主要使用的技术是zrender.js和vue.js，zrender 用于实现流程图，vue搭建整体架构。本篇文章主要面向对zrender有一定了解的同学。本篇文章只讲解核心flowchart的实现方法。一.分析流程图主要包含节点node、联系edge以及组group三个部分。功能主要有 添加节点 添加联系，分为节点与节点、节点与组、组与组之间的联系 添加组 删除功能 二.实现方式 实现一个flowEdito.转载 2021-05-02 10:15:48 · 4524 阅读 · 0 评论 -
用zrender实现工作流图形化设计（附范例代码）
公司研发的管理系统有工作流图形化设计和查看功能，这个功能的开发历史比较久远。在那个暗无天日的年月里，IE几乎一统江湖，所以顺理成章地采用了当时红极一时的VML技术。后来的事情大家都知道了，IE开始走下坡路，VML这个技术现在早已灭绝，导致原来的工作流图形化功能完全不能使用，所以需要采用新技术来重写工作流图形化功能。多方对比之后，决定采用zrender库来实现（关于zrender库的介绍，请看http://ecomfe.github.io/zrender/），花了一天的时间，终于做出了一个大致的效果模转载 2021-05-01 15:21:52 · 520 阅读 · 0 评论 -
前端都是手写ECharts ?
一、自定义的必要性绘制的底层是强大的,我们所用的各端语言只是在现代UI追求的步伐中和用户喜好的交互中求同存异，抽取封装出自成个性风格的UI控件,当然面对万亿级别的客户各个平台的UI库出也不可能满足所有的客户需求,当然一门语言的可制定性也意味着其强大,几乎每个平台都提供了接口让开发者创造其UI的可能性,更可能的能满足客户需求。ECharts作为前端强大的图表K线等绘制工具可以说应有竟有,无比风骚。但用户和产品的需求永远是一个库满足不了的。当然作为技术人员自定义绘制也应该是需要掌握的技术。我们前端...转载 2021-04-29 10:10:56 · 354 阅读 · 0 评论 -
canvas图形编辑器
原文地址：canvas图形编辑器使用canvas进行开发项目，我们离不开各种线段，曲线，图形，但每次都必须用代码一步一步去实现，显得非常麻烦。有没有一种类似于PS，CAD之类的可视化工具，绘制出基本的图形，然后输出代码。之后我们就可以在这个生成的图形场景的基础上去实现功能，那将是多么的美妙的事啊。话不多说，我们来实现一个图形编辑器吧????。主要实现如下的功能：直线(实线、虚线) 贝塞尔曲线...转载 2020-01-31 00:06:23 · 2319 阅读 · 0 评论