Raphael Js不能用图像填充路径
Raphael Js can't fill path with Image
我一直在尝试用图像模式填充路径,但徒劳。我有这把小提琴。我可以像圆一样填充物体,但不能填充任何路径。请点击红色区域标签,并点击操作的任意路径。
JS:
var paths = {
path_1: {
name: '1',
path: 'M30.848,0.13 45.4,1.747 58.983,1.747 74.829,3.687 90.999,3.687 123.015,3.687 149.21,0.13 176.051,1.908 201.923,3.687 236.526,3.687 268.865,6.598 279.538,6.598 297.647,6.598 316.404,6.598 339.042,3.364 369.765,6.598 391.108,6.598 420.861,9.185 435.091,18.563 440.265,40.23 443.499,68.366 447.703,91.65 451.907,115.582 453.848,138.287 453.848,160.533 456.758,179.29 459.345,195.46 461.608,213.57 462.902,229.093 465.489,239.441 466.783,254.965 464.196,277.926 461.285,288.921 455.464,292.479 440.911,297.006 423.448,298.623 389.492,298.623 376.232,298.623 370.411,298.623 360.387,298.623 355.858,298.623 348.421,298.623 340.659,298.623 331.928,297.329 328.047,298.623 318.668,298.623 309.29,298.623 289.563,298.623 273.394,298.623 262.397,298.623 243.317,297.329 235.232,298.623 227.794,300.887 218.416,300.887 212.271,299.27 195.132,300.887 187.694,300.887 178.962,300.887 164.409,300.887 149.533,300.887 137.567,303.15 123.338,303.15 97.79,303.15 87.118,303.15 73.859,304.444 58.659,304.444 40.226,304.444 21.146,302.827 13.708,296.035 5.946,289.567 2.065,282.13 0.125,262.402 0.125,228.77 0.125,201.281 0.125,171.529 4.006,147.274 3.359,122.373 3.359,106.526 4.006,92.621 8.21,70.63 11.444,42.495 15.325,24.708 15.325,17.27 18.882,9.832 z'
}
}
var colorAttributeMap = {};
var drawn = false;
var choosenColor;
function drawOnPaper(r) {
var cir = r.circle(50,50,10);
cir.attr({
cursor: 'pointer',
fill: choosenColor
})
for (var country in paths) {
var path = r.path(paths[country].path);
path.node.id = country;
if (drawn == false) {
colorAttributeMap[country] = 'none';
}
$(path.node).click({
rObj: path
},
function (e) {
colorAttributeMap[path.node.id] = choosenColor;
clearObjects(e.data.rObj.paper);
drawOnPaper(e.data.rObj.paper);
});
console.log("Path " + country + " Color " + colorAttributeMap[country]);
path.attr({
cursor: 'pointer',
fill: choosenColor
})
}
if (drawn == false) {
drawn = true;
}
}
function clearObjects(r){
r.clear();
}
jQuery(function($) {
var r = Raphael(document.getElementById("map"), 1550, 750);
r.setViewBox(0, 0, 612, 792);
drawOnPaper(r);
$('body').delegate( '.Color',"click",function(){
var a=$(this).html();
choosenColor = a;
});
});
HTML: <body>
<div id="main">
<div id="left">
<table id="table">
<tr>
<td>Click on label of red area and then clcik on the path </td>
</tr>
<tr>
<td>Fill it with following image</td>
<td bgcolor="red"><a class="Color" value="url(http://media.balenciaga.com/images/10x10/SWATCH_D94J4_1000_A_10x10.jpg)">url(http://media.balenciaga.com/images/10x10/SWATCH_D94J4_1000_A_10x10.jpg)</a>
</table>
</div>
<div id="map"></div>
</div>
</body>
CSS: body {
margin: 1em;
text-align: center
}
svg {
background: #ffc;
height: 800px
}
path {
fill: transparent;
stroke: black;
stroke-width: 3;
stroke-linejoin: round;
stroke-linecap: round;
}
First
如果你想在路径上点击,你需要填充它,否则你只能按笔画。
var choosenColor = '#ffc';
第二您需要为节点设置填充属性,而不是为引用设置填充属性:
$(path.node).attr({
cursor: 'pointer',
fill: choosenColor
})
3
从css中移除填充
path {
fill: transparent;
}
第四在矩形后面画圆。你想在上面圈起来
http://jsfiddle.net/bGrB7/14/
我希望这是你想要的
相关文章:
- 如何将要单独填充的每个HTML画布路径/形状分开
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 路径和填充程序的模块配置
- 悬停在表行上填充svg路径
- 无法重置 SVG 路径的填充颜色
- 使用 D3,如何设置轴路径和线条的属性(“填充”、“无”),而不是文本(不编辑样式表)
- 正确填充 D3 创建的增强 svg 路径
- 以数学方式转换 SVG 路径中的值以填充视图框
- (HTML5 画布)填充样式 img 不会随我的地形路径移动
- 如何获取使用其完整路径填充的某些文件的文件[0]或[对象文件]
- SVG 填充路径动画
- 填充路径取决于绘制顺序
- Chrome弧形路径填充错误的解决方法
- 在不同的路径中用作填充的一种图案
- 可以't使用require配置路径和填充程序加载Handlebars
- 如何使svg路径填充为进度动画
- 用画布填充svg路径
- Raphael Js不能用图像填充路径
- 如何用颜色填充路径项
- D3中的并发转换(填充路径下的圆圈)