0
我正在使用KineticJS文本路徑,但我無法將背景顏色或圖像填充到整個路徑。請給我一個解決方案。KineticJS中的文本路徑背景
我正在使用KineticJS文本路徑,但我無法將背景顏色或圖像填充到整個路徑。請給我一個解決方案。KineticJS中的文本路徑背景
爲了把背景顏色上textpath,添加一個常規路徑用粗筆畫
// the regular path will be the 「background color」
var path = new Kinetic.Path({
x: 100,
y: 50,
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
stroke: 'green',
strokeWidth:25,
lineCap:"round"
});
layer.add(path);
// and then add the text on the same path
var textpath = new Kinetic.TextPath({
x: 100,
y: 50,
fill: "gold",
fontSize: '24',
fontFamily: 'Arial',
text: 'All the world\'s a stage, and all the men and women merely players.',
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
});
layer.add(textpath);
這裏的代碼和一個小提琴:http://jsfiddle.net/m1erickson/Sx4QA/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 220
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=new Image();
img.onload=function(){
start(img);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/shakespeare.png";
function start(img){
var background=new Kinetic.Rect({
x:0,
y:0,
width:stage.getWidth(),
height:stage.getHeight(),
fill:"skyblue"
});
layer.add(background);
var image=new Kinetic.Image({
image:img,
x:128,
y:25,
width:100,
height:100,
});
layer.add(image);
var path = new Kinetic.Path({
x: 100,
y: 50,
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
stroke: 'green',
strokeWidth:25,
lineCap:"round"
});
layer.add(path);
var textpath = new Kinetic.TextPath({
x: 100,
y: 50,
fill: "gold",
fontSize: '24',
fontFamily: 'Arial',
text: 'All the world\'s a stage, and all the men and women merely players.',
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
});
layer.add(textpath);
layer.draw();
}
</script>
</body>
</html>
謝謝非常。它爲我工作。 – KBR1905
嗨,我有一個問題。 http://stackoverflow.com/questions/17855252/kinetic-js-image-property – KBR1905
如何爲每個角色製作bakcground –