• 如何给canvas中绘制的图标加标签


    实验室的任务:为canvas中的图标加标签

    我最先想到的是直接用html5的fillText方法,但是一直纠结于如何把这个文字清除掉,花了大概一个下午的时间都没有找到很好的解决办法。其中看到一个比较有意思的是做两个重合的canvas,上面的那个透明,每次重绘上面的那个canvas就解决了,自己想到的办法是记下这个text的位置,然后用清除clearRect()的方法来清除,但是比较悲剧的是这个label不是定长的。其实用土办法就很容易解决了,用一个空的div,然后绝对定位,就轻松实现了。看来做事情一定还是要从自己熟悉的东西开始发挥,要不会花费很多时间纠结。

    		//label绘制,上方标签
    	    canvas.addEventListener('mousemove', function(e) {
    			for(var i=0;i<locDevice.length;i++){
    				if(locDevice[i].pointIn(e.layerX, e.layerY))
    					{
    				     var text = locName[i];
    					 $('#tips span').text(text);
    					 $('#tips').css('left',e.pageX+10);
    					 $('#tips').css('top',e.pageY+10);
    					 $('#tips').show();
    					}
    				}
    		}, false);
    		canvas.addEventListener('mouseout', function(e) {
    					 $('#tips').hide();
    		}, false);
    		//绘制完成
    

      

  • 相关阅读:
    Android读取url图片保存及文件读取
    Adroid解析json
    接口设计的 11 种原则
    检查并创建目录mkdir
    python 替换windows换行符为unix格式
    python中 __name__及__main()__的使用
    python中的urlencode与urldecode
    CentOS Docker 安装
    CentOS基础命令大全
    ubuntu更换阿里源
  • 原文地址:https://www.cnblogs.com/qiyueshihuang/p/2241245.html
Copyright © 2020-2023  润新知