Rect是可拖动的，可调整大小，即使你可以在其上添加或设置文本。但是在小提琴文本区域中取得用户的输入没有出现但在我的工作区上它的工作正常但是如果你看到小提琴问题仍然存在，因为“ simpleText“如果你取消注释它，box会按照期望每次调整大小，但由于simpleText它只调整第一次，之后会破坏逻辑。
这是我的小提琴http://jsfiddle.net/abhish20/Y2m2z/56/
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500,
x: 10,
y:18
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group = new Kinetic.Group({
draggable : true,
});
var relativeX=0;
var relativeY=0;
var box = new Kinetic.Rect({
x : relativeX,
y : relativeY,
offset : [ 50, 25 ],
width : 100,
height : 50,
fill : 'yellow',
stroke : 'black',
strokeWidth : 1,
name:"comment"
});
group.add(box);
layer.add(group);
layer.draw();
var simpleText = new Kinetic.Text({
x : relativeX,
y : relativeY,
text : '',
fontSize : 15,
fontFamily : 'Calibri',
width:box.getWidth(),
height:box.getHeight(),
padding: 4,
fill : 'black',
id:"textBox"
});
group.add(simpleText);
layer.draw();
var circle1 = new Kinetic.Circle({
x: relativeX+50,
y:relativeY+25,
x : 50,
y : 25,
radius: 4,
fill: 'red',
stroke: 'black',
strokeWidth: 1,
draggable: true,
visible:false
});
group.add(circle1);
layer.draw();
circle1.on("dragmove", function () {
var pos = this.getPosition();
var x = pos.x;
var y = pos.y;
var rectX = box.getX();
var rectY = box.getY();
var x1= x - rectX;
var y1= y - rectY;
box.setSize(x1+50,y1+25);
layer.draw();
var textX=simpleText.getX();
var textY=simpleText.getY();
var x2= x - textX;
var y2= y - textY;
simpleText.setSize(x2,y2);
var circle1X=circle1.getX();
var circle1Y=circle1.getY();
var x3=x-circle1X;
var y3=y-circle1Y;
circle1.setSize(x3,y3);
layer.draw();
});
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
circle1.on('mouseover', function() {
document.body.style.cursor = 'se-resize';
});
circle1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
group.on('click', function(evt) {
var shape =circle1.getVisible();
if( shape==false)
{
circle1.show();
layer.draw();
$('html').on('keydown',function(e){
if(e.keyCode === 46){
group.destroy();
layer.draw();
}
});
}else{
circle1.hide();
layer.draw();
}
circle1.setVisible(false);
});
group.on('dblclick', function() {
if (hasInput)
return;
addInput();
});
var canvas = document.getElementById('canDemo');
ctx = canvas.getContext('2d'),
font = '14px sans-serif',
hasInput = false;
function addInput() {
var input = document.createElement('textarea');
var x=box.getX();
var y=box.getY();
input.id="comment_area";
input.type = 'textarea';
input.style.position = "absolute";
input.style.left = x+220+ 'px';
input.style.top = y+171+ 'px';
input.style.height=300;
input.style.zIndex="3";
input.onblur= handleEnter;
document.body.appendChild(input);
input.focus();
if(simpleText.getText().length!=0)
{
$("#comment_area").val(simpleText.getText());
}
hasInput = true;
}
function handleEnter(e) {
var keyCode = e.keyCode;
simpleText.setText( $("#comment_area").val());
drawText(this.value, parseInt(this.style.left, 10), parseInt(this.style.top, 10));
document.body.removeChild(this);
hasInput = false;
}
function drawText(txt, x, y) {
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.font = font;
ctx.fillText(txt, x - 4, y - 4);
layer.draw();
}
$('#comment_area').keypress(function (e){
if(e.keyCode === 13){
e.preventDefault();
this.value = this.value.substring(0, this.selectionStart)+"\n";
}
});
我担心的是我将所有元素组合在一起表现得像单个组件，因此它会导致问题但我只想以组形式工作代码。
请建议
答案 0 :(得分：0)
您的代码存在问题。
circle1.setSize（x3，y3）;
如果x3或y3 = = 0，则圆圈消失。
注释掉那一行，然后代码就可以了。
您可以通过插入... console.log（x3，y3）或其他任何内容来测试代码以查找此类问题。