HTML5 이미지에 클리핑 마스크 효과가 필요합니다. 800 나는KineticJS를 사용하여 이미지 마스크 효과 적용
http://www.html5canvastutorials.com/libraries/kinetic-v3.8.3.js
대신은 = 새 Kinetic.Stage ("용기" VAR 단계 된 직후 무대 객체를 생성하여 잘 작동
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js
으로 사용하는 경우 내 를 찾아주세요 , 800);
v4.4.1.min.js에서이 기능을 구현하는 방법은 무엇입니까?
감사합니다.
는 KineticJS에 클리핑 할 수있는 방법은 여러가지 방법이 있습니다
이 같은 미리 정의 된 모양 중 하나 내부에 채우기 패턴을 사용할 수 있습니다:
var clipWithFill = new Kinetic.Circle({
…
fillPatternImage: img,
fillPatternOffset: [-160, 90],
…
});
그리고 당신은 사용하는 사용자 지정 모양을 만들 수 있습니다 html 캔버스의 클립(); 여기
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>
당신은 setClipFunc 방법과 클리핑 마스크 설정할 수 있습니다
http://kineticjs.com/docs/Kinetic.Container.html (참조 클립)
당신은이를 사용할 수 있습니다스테이지, 레이어 또는 그룹을 포함한 모든 컨테이너. 클리핑 마스크 안의 모든 항목이 표시되며 클리핑 마스크 외부의 모든 항목이 보이지 않습니다.
@ markE 감사합니다. 정말 도움이됩니다. 질문이 하나 더 있으면 이미지를 드래그 할 수 있습니까? 그래서 필요한 부분 만 볼 수있게 만들었습니다. – vDeepak
@v 디팍 : 물론입니다. 미리 정의 된 원의 경우 draggable : true를 추가합니다. 사용자 정의 모양의 경우 draggable : true ** 및 ** canvas.fillStroke (this)를 추가하십시오. – markE
번호. 이미지를 드래그 할 수 없습니다. 캔트는 이해합니다. draggable을 true로 설정하면 이미지를 드래그하거나 원을 만들 수 있습니까? – vDeepak