带有可拖动图像的dynamic.js中的复杂剪切边界 [英] complex clipping boundary in kinetic.js with draggable image
问题描述
查看我基于html5的剪裁约束
Check out my html5 based clipping constraint on
http://shedlimited.debrucellc.com/test3/canvaskinclip.html
(在 http://jsfiddle.net/aqaP7/4/上与jsfiddle进行通讯)
(messing with jsfiddle on http://jsfiddle.net/aqaP7/4/)
因此，在html5中，我可以轻松地绘制一个如下所示的边界:
So, in html5 I can easily draw a shaped boundary like the following:
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();
不过在dynamic.js中，我看到的所有剪切选项都是:高度，宽度和x，y，
In kinetic.js though, all I see for clipping options is: height, width, and x, y,
我遇到了以下问题:屏蔽/剪切图像在KineticJS中使用多边形，但是内部/填充图像无法设置为可拖动
I came across the following : Mask/Clip an Image using a Polygon in KineticJS, but the inner/fill image can't be set to draggable
请帮忙！
推荐答案
在新的dynamicJS版本中，很多工作都是在后台为您完成的.
In the new kineticJS versions, a lot of the work is done in the background for you.
看看这个教程:
此小提琴可以使您非常接近，这是代码:
This fiddle gets you pretty close, here's the code:
<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>
有一种更复杂/更准确的方法，而无需将其设置为背景图案，例如将对象分组在一起
There is a more complex/accurate way of doing this without making it a background pattern, like with grouping objects together
这篇关于带有可拖动图像的dynamic.js中的复杂剪切边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
