0
저는 KineticJS 초심자이고 교차로에서 특정 색상으로 바뀌는 두 개의 드래그 가능한 웨지를 만들고 싶습니다. 나는이 포럼에서 자르기 자습서와 모양 교차 질문에 대한 모양을 보았습니다. 일반적인 전술은 드래그 이벤트를 잡아 내고 KineticJS 도형을 다시 그리는 것이며 해당 도형의 drawFunc 내에서 context.rect/context.arc를 사용하여 그 모양을 복제하고 클립하는 것입니다.KineticJS 웨지와 교차하는 부분에있는 클립
내 문제는 KineticJS 쐐기를 시뮬레이션하기위한 편리한 context.wedge가 없다는 것입니다. 따라서 웨지 사용을 중지하거나 복잡한 계산을 수행하여 컨텍스트와 웨지를 시뮬레이션하거나 더 나은 방법을 찾습니다. 누구든지 더 좋은 방법을 알고 있습니까?
감사합니다,
매
JSFiddle에 코드 : http://jsfiddle.net/kdRjP/5/이 (. 작동하지 않습니다, 단지 사방에 중복 웨지하게, 심지어 사람을 클리핑하지 않음)
코드 :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="js/kinetic-v4.3.1.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
drawWedges();
function drawWedges() {
var stage = new Kinetic.Stage({
container: "container",
width: 400,
height: 400
});
window.console.log("Wedges: 1");
var wedgeLayer = new Kinetic.Layer();
var wedgeGroup = new Kinetic.Group({
x: stage.getWidth()/2,
y: stage.getWidth()/2
});
var wedge_1 = new Kinetic.Wedge({
x: -100,
y: 0,
radius: 80,
angleDeg: 40,
opacity: 0.7,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true,
rotationDeg: 0
});
var wedge_2 = new Kinetic.Wedge({
x: 100,
y: 0,
radius: 80,
angleDeg: 40,
opacity: 0.7,
fill: 'cyan',
stroke: 'black',
strokeWidth: 2,
draggable: true,
rotationDeg: 0
});
function makeShapeClip(clipShape, compositeShape) {
clipShape.attrs.drawFunc_bak = clipShape.attrs.drawFunc;
clipShape.attrs.drawFunc = function() {
var context = this.getContext();
context.save();
context.beginPath();
this.attrs.drawFunc_bak.call(this, context);
context.clip();
context.beginPath();
compositeShape.attrs.drawFunc.call(this, context);
context.fill();
context.closePath();
context.restore();
};
return compositeShape;
};
wedge_1.on("dragend", function(evt) {
var mousePos = stage.getMousePosition();
var stageIntersections = stage.getIntersections({"x": mousePos.x, "y": mousePos.y});
if (stageIntersections.length > 0) {
// Want to draw a piece of wedge_1 clipped around wedge_2.
// Since can't turn wedge_2 into a clip path after it's been drawn,
// draw a duplicate of wedge_2 superimposed on top of wedge_2,
// turn that duplicate into a clip path,
// and then try to draw a duplicate of wedge_1 into it.
// Start by creating the wedge_1 duplicate in proper "intersection area color"
var wedgeComposite = new Kinetic.Wedge({
x: wedge_1.getX(),
y: wedge_1.getY(),
radius: wedge_1.getRadius(),
angleDeg: wedge_1.getAngleDeg(),
opacity: 0.5,
fill: 'yellow',
stroke: 'blue',
strokeWidth: 2,
draggable: true,
rotationDeg: wedge_1.getRotationDeg()
});
// Now pass that wedge_1 duplicate into a special function that
// creates wedge_2 duplicate and makes it into a clip path.
var wedgeClip = makeShapeClip(new Kinetic.Wedge({
x: stageIntersections[0].getX(),
y: stageIntersections[0].getY(),
radius: stageIntersections[0].getRadius(),
angleDeg: stageIntersections[0].getAngleDeg(),
opacity: 0.5,
fill: '#999999',
stroke: 'red',
strokeWidth: 2,
draggable: true,
rotationDeg: stageIntersections[0].getRotationDeg()
}), wedgeComposite);
wedgeGroup.add(wedgeClip);
}
wedgeLayer.draw();
});
wedgeGroup.add(wedge_1);
wedgeGroup.add(wedge_2);
wedgeLayer.add(wedgeGroup);
stage.add(wedgeLayer);
}
</script>
</body>
</html>
btw 인 KineticJS는 다음 달에 클리핑 지원 계획을 세우고 있습니다. 머무르다. –
정말요? 멋지다! 문서화에 관해서 ... 동위 원소의 단 하나의 강론자가 나를 위해 그것을하지 않습니다. 내가 알아 낸 것만 큼 내가 알아 낸 비트를위한 메서드 헤더를 작성하고 싶습니다. 어떻게 저것을 공헌 할 것입니까? 그리고 더 나은 아직, 나는 그들이 미래의 개발 중에 업데이트 될지 모른다면 나는 텍스트 블록을 쓰고 싶지 않다. 그들은 종교적으로 업데이트 될 것입니다, 맞죠?:) – Mae
네, KineticJS 문서가 꽤 희박하다는 것을 알고 있습니다. 그것은 더 나아질거야 :) –