Raphael Js无法用Image填充路径
[英]Raphael Js can't fill path with Image
问题描述
I have been trying to fill up path with image pattern but in vain. 
我一直试图用图像模式填充路径，但徒劳。 I have this fiddle . 我有这个小提琴 。 I am able to fill the object like cirle with image but not any path. 我可以用图像填充对象，例如cirle，但没有任何路径。 Please click on the red area label and click on any path for the action. 请单击红色区域标签，然后单击操作的任何路径。
JS: 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: 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: 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;
}
1 个解决方案
解决方案1
1 已采纳 2013-04-10 11:41:05
First 第一
If you want to click on the path, you need to fill it, else you only can press the stroke. 如果要单击路径，则需要填充它，否则只能按笔划。
var choosenColor = '#ffc';
Second 第二
You need to set the fill attr for the node, not the reference: 您需要为节点而不是引用设置填充属性：
$(path.node).attr({
cursor: 'pointer',
fill: choosenColor
})
Third 第三
Remove the fill from the css 从CSS移除填充
path {
fill: transparent;
}
Fourth 第四
Draw the circle after the rectangles. 在矩形之后绘制圆。 You want to circle on top. 您想在上面圈一下。
Example 例
http://jsfiddle.net/bGrB7/14/ http://jsfiddle.net/bGrB7/14/
I hope this is what you want. 我希望这就是你想要的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.