canvas绘制坐标尺动态设置每个刻度之间的间距

小薇安 2019-10-14 02:51:46

在绘制坐标尺的时候，坐标尺上的刻度的大小会根据窗口大小而改变，怎么实现既能用10或50或100的倍数标示刻度，又能达到让刻度随窗口缩放比例动态变化呢？
类似于datav的坐标尺功能；

...全文

631 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhaonuonuo 2021-02-19

打赏
举报

回复

请问，你实现了嘛？

蝸牛ちゃん 2020-07-28

打赏
举报

回复

不知楼主解决该问题没有，我写过一篇解决该问题的文章：坐标轴开始和结束坐标及间隔分割算法，如果还未解决的话可以参阅。

使用Canvas绘制一个挂钟

项目中有个需求，将对象一天内对应的不同的状态在时间轴上显示出来。调研的方案有5种， 1、时间轴用div画，时间轴上遮罩的状态改变则改变时间轴div本身的颜色。 2、时间轴用div画，时间轴上的遮罩用div画，状态改变则改变遮罩div的颜色，时间轴div只做展示不做样式更改。 3、时间轴用静态的图片展示，时间轴上的遮罩用div画，状态改变则改变遮罩div的颜色。 4、时间轴用canvas画，时间轴上的遮罩用canvas画，每次状态改变重绘canvas的时间轴和遮罩层。 5、时间轴用canvas画，时间轴用另外

canvas是前端工作中不可少的一部分，那么今天就用小程序的canvas画一次刻度尺，希望大家喜欢，同事有更好意见的，也可以在评论去留言哦！ 1、axml <view> <canvas id="canvas" class="canvas" onTouchStart="start" onTouchMove="move" onTouchEnd="end" /> </...

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy 介绍使用Canvas绘制具有x，y轴的直角坐标轴，并在轴上绘制相应的刻度条。演示在线演示代码教程通过常量来计...

手势事件 touchstart 手指按下、touchmove 手指移动、 touchend 手指抬起效果图：完整代码： ruler.js var ruler = { /** * 初始化刻度尺插件 * @el 容器 String * @height 刻度尺高度 Number * @maxScale 最大刻度 Number * ...

39,084

社区成员

5,548

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章