我希望HTML5中的图像具有剪贴蒙版效果。请找我的 如果我使用
http://www.html5canvastutorials.com/libraries/kinetic-v3.8.3.js
而不是
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js
它可以正常创建舞台对象 - var stage = new Kinetic.Stage(“container”,800,800);
如何使用v4.4.1.min.js实现此功能?
感谢。
答案 0 :(得分:4)
在KineticJS中有几种方法可以进行剪裁
您可以在其中一个预定义形状中使用填充图案,如下所示:
var clipWithFill = new Kinetic.Circle({
…
fillPatternImage: img,
fillPatternOffset: [-160, 90],
…
});
您可以创建一个使用html canvas的clip();
的自定义形状 var clipWithCustomShape = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.save();
context.beginPath();
// draw our clipping shape
Context.rect(100,100,100,150);
// set it as the context's clipping region
context.clip();
// draw the image which will be clipped
context.drawImage(img,50,75);
// restore the context to it’s unclipped state
context.restore();
},
stroke: 'black',
strokeWidth: 5
});
这是代码和小提琴:http://jsfiddle.net/m1erickson/MWSx9/
<!DOCTYPE HTML>
<html>
<head>
<style>
body { margin: 0px; padding: 0px; }
canvas{border:1px solid red;}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
function drawClips(img) {
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 300
});
var layer = new Kinetic.Layer();
var clipWithFill = new Kinetic.Circle({
x: 100,
y: 100,
radius: 75,
fillPatternImage: img,
fillPatternOffset: [30, 90],
fillPatternRepeat: "no-repeat",
stroke: 'black',
strokeWidth: 5,
draggable: true
});
layer.add(clipWithFill);
var clipWithCustomShape = new Kinetic.Shape({
drawFunc: function (canvas) {
var context = canvas.getContext();
context.save();
context.beginPath();
// draw our custom clipping shape
drawOurCustomShape(context)
// set it as the context's clipping region
context.clip();
// draw the image which will be clipped
context.drawImage(img, 200, 75);
//
context.restore();
// re-draw our custom shape
// just to outline our clipped region
drawOurCustomShape(context);
canvas.fillStroke(this);
},
stroke: 'black',
strokeWidth: 5,
draggable: true
});
layer.add(clipWithCustomShape);
function drawOurCustomShape(context) {
context.moveTo(200, 150);
context.bezierCurveTo(250, 170, 300, 20, 390, 100);
context.lineTo(350, 220);
context.lineTo(250, 220);
context.closePath();
}
stage.add(layer);
}
function houseToPNG() {
var tempCanvas = document.createElement("canvas");
var tempCtx = tempCanvas.getContext("2d");
tempCanvas.width = 140;
tempCanvas.height = 140;
drawHouse(tempCtx);
var img = new Image();
img.onload = function () {
tempCanvas = null;
drawClips(img);
}
img.src = tempCanvas.toDataURL();
}
function drawHouse(ctx) {
ctx.save();
// roof
ctx.beginPath();
ctx.fillStyle = "red";
ctx.strokeStyle = "gray";
ctx.lineWidth = 4;
ctx.moveTo(5, 40);
ctx.lineTo(135, 40);
ctx.lineTo(70, 4);
ctx.closePath()
ctx.fill();
ctx.stroke();
// frame
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.strokeStyle = "gray";
ctx.lineWidth = 4;
ctx.rect(20, 40, 100, 100);
ctx.fill();
ctx.stroke();
// windows
ctx.beginPath();
ctx.fillStyle = "lightgray";
ctx.strokeStyle = "orange";
ctx.lineWidth = 3;
ctx.rect(40, 55, 20, 25);
ctx.rect(80, 55, 20, 25);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "tan"
ctx.moveTo(42, 68);
ctx.lineTo(58, 68);
ctx.moveTo(82, 68);
ctx.lineTo(98, 68);
ctx.moveTo(50, 57);
ctx.lineTo(50, 78);
ctx.moveTo(90, 57);
ctx.lineTo(90, 78);
ctx.stroke();
// door
ctx.beginPath();
ctx.fillStyle = "purple";
ctx.strokeStyle = "orange";
ctx.lineWidth = 3;
ctx.rect(60, 95, 20, 40);
ctx.rect(73, 115, 1, 1);
ctx.fill();
ctx.stroke();
//
ctx.restore();
}
houseToPNG();
</script>
</body>
</html>
答案 1 :(得分:0)
您可以使用setClipFunc方法设置剪贴蒙版:
http://kineticjs.com/docs/Kinetic.Container.html(见剪辑)
您可以将此用于任何容器,包括舞台,图层或组。剪贴蒙版内的所有内容都是可见的,剪贴蒙版外的所有内容都将不可见