查看我的基于 html5 的裁剪约束
http://shedlimited.debrucellc.com/test3/canvaskinclip.html
(在 http://jsfiddle.net/aqaP7/4/ 上搞乱 jsfiddle )
因此，在 html5 中我可以轻松绘制如下所示的形状边界:
context.beginPath();
context.moveTo(5, 5);
context.lineTo(34, 202);
context.lineTo(2, 405);
context.lineTo(212, 385);
context.lineTo(425, 405);
context.lineTo(400, 202);
context.lineTo(415, 10);
context.lineTo(212, 25);
context.clip();
在kinetic.js中，我看到的所有裁剪选项是:高度、宽度和x、y，
我遇到了以下内容:Mask/Clip an Image using a Polygon in KineticJS ，但内部/填充图像不能设置为可拖动
请帮忙!
最佳答案
在新的kineticJS版本中，很多工作都是在后台为您完成的。
看看这个 tutorial :
这个fiddle让你非常接近，这是代码:
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function draw(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 700
});
var layer = new Kinetic.Layer();
var patternPentagon = new Kinetic.RegularPolygon({
x: 220,
y: stage.getHeight() / 4,
sides: 5,
radius: 70,
fillPatternImage: images.yoda,
fillPatternOffset: [-220, 70],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
patternPentagon.on('dragmove', function() {
//this.setFillPatternImage(images.yoda);
//this.setFillPatternOffset(-100, 70);
var userPos = stage.getUserPosition();
this.setFillPatternOffset(-userPos.x,-userPos.y);
layer.draw();
this.setX(220);
this.setY(stage.getHeight() / 4);
});
layer.add(patternPentagon);
stage.add(layer);
}
var sources = {
darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
};
loadImages(sources, function(images) {
draw(images);
});
</script>
</body>
有一种更复杂/准确的方法可以做到这一点，而无需将其设为背景图案，例如将对象分组在一起
关于draggable - kinetic.js 中具有可拖动图像的复杂剪切边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14371383/