我正试图使一个便利贴类型的实用程序与织物画布。它将有助于被用作注解器。
我希望文本在给定的矩形宽度上自动换行。
有人能更新我的小提琴作品吗？
非常感谢您的建议。
下面是我的小提琴的一部分的链接：
http://jsfiddle.net/U7E9q/5/
var canvas = new fabric.Canvas('fabric-canvas');
canvas.hoverCursor = 'pointer';
var text = new fabric.IText("Enter Text Here ",{
fontSize: 20,
top: 100,
left: 100,
backgroundColor: '#faa',
lockScalingX: true,
lockScalingY: true,
selectable: true
});
//alert(text.text);
var rect = new fabric.Rect({
text_field: text,
width: 200,
height: 50,
fill: '#faa',
rx: 10,
ry: 10,
top: 100,
left: 100
});
canvas.add(rect);
canvas.add(text);
canvas.on('object:moving', function (event){
canvas.renderAll();
});
createListenersKeyboard();
function createListenersKeyboard() {
document.onkeydown = onKeyDownHandler;
//document.onkeyup = onKeyUpHandler;
}
function onKeyDownHandler(event) {
//event.preventDefault();
var key;
if(window.event){
key = window.event.keyCode;
}
else{
key = event.keyCode;
}
switch(key){
//////////////
// Shortcuts
//////////////
// Copy (Ctrl+C)
case 67: // Ctrl+C
if(ableToShortcut()){
if(event.ctrlKey){
event.preventDefault();
copy();
}
}
break;
// Delete (Ctrl+D)
case 127: // Ctrl+D
if(ableToShortcut()){
if(event.deleteKey){
delet();
}
}
break;
// Paste (Ctrl+V)
case 86: // Ctrl+V
if(ableToShortcut()){
if(event.ctrlKey){
event.preventDefault();
paste();
}
}
break;
default:
// TODO
break;
}
}
function ableToShortcut(){
/*
TODO check all cases for this
if($("textarea").is(":focus")){
return false;
}
if($(":text").is(":focus")){
return false;
}
*/
return true;
}
function copy(){
if(canvas.getActiveGroup()){
for(var i in canvas.getActiveGroup().objects){
var object = fabric.util.object.clone(canvas.getActiveGroup().objects[i]);
object.set("top", object.top+5);
object.set("left", object.left+5);
copiedObjects[i] = object;
}
}
else if(canvas.getActiveObject()){
var object = fabric.util.object.clone(canvas.getActiveObject());
object.set("top", object.top+5);
object.set("left", object.left+5);
copiedObject = object;
copiedObjects = new Array();
}
}
function paste(){
if(copiedObjects.length > 0){
for(var i in copiedObjects){
canvas.add(copiedObjects[i]);
}
}
else if(copiedObject){
canvas.add(copiedObject);
}
canvas.renderAll();
}
function delet(){
var activeObject = canvas.getActiveObject();
canvas.remove(activeObject);
console.log('after remove getActiveObject(): ', canvas.getActiveObject(), activeObject === canvas.getActiveObject());
canvas.renderAll();
}
3条答案
按热度按时间6mzjoqzu1#
如果你把便笺条作为一个矩形和文本的组合来管理，你可以改进同样的行为。当你需要编辑组中的文本时，你只需要取消组合并克隆元素，将克隆的元素附加到画布上，并将文本设置为可编辑。
您需要处理类似双击的事件来处理此行为，然后处理鼠标按下或与画布的其他交互来重新组合它们。
798qvoo82#
http://jsfiddle.net/4HE3U/1/
以上是一把能让你满意的小提琴
基本上我已经做了一组文本和矩形，我已经把它添加到画布。只有一个变化，你需要做的是，你可以采取一个文本框，以获得当前的即时贴文本内容，因为我们不能编辑文本的i-文本在线一旦我们添加到任何组。目前没有办法为IText处理的事件，因为他们没有传递给它，如果它包含在一个组。我认为这也是处理这个问题的首选方法，因为它会让用户感到困惑--如果他开始编辑多个文本怎么办？这可能会导致混乱。也许你可以稍微修改一下你的脚本来解决这个问题。
我已添加文本和矩形
第一个
tjvv9vkg3#
这里是便笺功能。文字换行工作和字体大小改变w.r.t便笺宽度和高度。编辑模式激活双击。