[Web Chart系列之五] 4. 实战draw2d(Raphael)之取消Chrome中Label Text 全部选中
2013-03-19 17:50
344 查看
情况描述
这里使用的是Rectangle , 里面加入一个Label 或多个Label 的组合图形。在Chrome里拖拽图形的时候,偶尔会把所有Rectangle包含的Label 全部以深蓝色底色。
需要在非Canvas的区域点击一下,深底色才消除。
以上的状况出现在IE和Chrome都会有,但几率倒不是很大。在Firefox 中没有这个问题。
问题考虑与重现
既然不是所有流量器都有这个问题,应该和浏览器有一定的关系。google 一下 “Chrome 页面全选中”, 果然找到一些线索。
Chrome 和其他流量器本身提供了文本部分和全部选中的功能,选择之后的效果就是反底色。
在非Canvas区域尽量多选一些文本,果然Canvas区的图马上就有那种效果了,问题很容易重现了。
看来这个问题不光是chart 会遇到。
既然是选中导致,那是否设置不可选中的CSS是否就可以了呢? 先看看如何设置不可选取的样式
在 Chrome 中:
body { -webkit-user-select: none; }
在Firefox 中:
body { -moz-user-select: none; }
在IE中(不能通过设置 CSS达成,用以下方式)
<body onselectstart="return false">
问题解决
以上的设置是对整个页面进行设置, 这并不是我的要求。对Chrome 和 FireFox ,可以对指定的页面元素使用以上CSS样式。
回归到draw2d, 如何给Label 设置这个CSS,
1. 初步想法是看看能否找到直接设置CSS的方式, as shape.style.XXX= XXX, 没有找到。
看来只能底层一点的Raphael方式设置页面元素的CSS了。
2. 设置点:
最初考虑的设置点是init or repaint但是发现都失败了。
正确是设置在 Label定义的createSet的方法里。
修改如下:
createSet: function () { var newShape = this.canvas.paper.text(0, 0, this.text, this.getTitle(), this.getWeight()); //not select text if(isChrome) { ($(newShape.node)).css('-webkit-user-select', 'none'); } return newShape; }
相关文章推荐
- [Web Chart系列之五] 4. 实战draw2d(Raphael)之取消Chrome中Label Text 全部选中
- [Web Chart系列之五] 2. 实战draw2d 之Label 放大,缩小的问题(raphael的text类似问题)
- [Web Chart系列之五] 2. 实战draw2d 之Label 放大,缩小的问题(raphael的text类似问题)
- [Web Chart系列之五] 6. 实战draw2d之ConnectionRouter
- [Web Chart系列之五] 6. 实战draw2d之ConnectionRouter
- [Web Chart系列之五] 1. 实战draw2d 之总体介绍
- [Web Chart系列之五] 1. 实战draw2d 之总体介绍
- [Web Chart系列之五] 5. 实战draw2d之figure tooltip 实现
- [Web Chart系列之五] 5. 实战draw2d之figure tooltip 实现
- [Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)
- [Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)
- [Web Chart系列之五] 6. 实战draw2d之ConnectionRouter
- 客户端全部选中或取消Repeater中的CheckBox
- 全部选中和删除选中商品的实现,点击一下全选,点击两下取消全选
- jQuery选中该复选框来实现/全部取消/未选定/获得的选定值
- js全选,全选以后,如果选中其中一个,全选效果取消,如果复选框全部选中,全选按钮自动也被选中
- asp.net 全部选中与取消操作,选中后的删除(ajax)实现无刷新效果
- 在点击TextEditor编辑框后,默认是选中编辑框内的全部内容,去掉默认选择内容这个效果
- jquery全选,全不选,单个取消选中全选自动去除, 单个全部选中全选自动勾选
- RadioGroup 全部取消选中 和选中某个按钮