Javascript 结构js活动对象不可选择
我正在尝试构建一个脚本，允许用户输入自定义文本，然后缩放、更改字体和颜色。 它工作，一切都工作，除了它显示了一个意外的行为：如果我在对象外部的画布上单击，那么对象将变为非活动状态，然后我无法使它再次变为活动状态 这是网页：Javascript 结构js活动对象不可选择,javascript,fabricjs,Javascript,Fabricjs,我正在尝试构建一个脚本，允许用户输入自定义文本，然后缩放、更改字体和颜色。 它工作，一切都工作，除了它显示了一个意外的行为：如果我在对象外部的画布上单击，那么对象将变为非活动状态，然后我无法使它再次变为活动状态 这是网页： <head> <link rel="stylesheet" href="css/googlefonts.css"> <link rel="stylesheet" href="css/style.css"&g
<head>
<link rel="stylesheet" href="css/googlefonts.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<script src="https://kit.fontawesome.com/589156f3be.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container1st">
<div class="outer2">
<div class="center2">
<span class="tb"><i class="fas fa-terminal"></i> Input text : </span><span><input class="input" data-text="text1" value="text1" id="id_text1" maxlength="30"/></span>
<span class="tb"> | <i class="fas fa-font"></i> Font-family : </span><span><select id="font-family"></select></span>
<span class="tb"> | <i class="fas fa-sliders-h"></i> Font Size : </span><span><input type="range" min="50" max="300" value="50" id="text_size" /></span>
<span class="tb"> | <i class="fas fa-palette"></i> Text color : </span><span><input type="text" id="text_colour" /></span>
<!--<span><button id="unu"> | Try it</button></span>-->
</div>
</div>
<div style="position relative, top: 10%;"> </div>
<div class="outer1">
<div class="center1">
<canvas id="c" width="886" height="621"></canvas><br />
</div>
</div>
<div style="position relative, top: 10%;"> </div>
</div>
<script>
var imageUrl = "img/cadru-01-ok23.png";
var canvas = new fabric.Canvas('c');
var text = "";
canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), {
// Optionally add an opacity lvl to the image
//backgroundImageOpacity: 0.5,
// should the image be resized to fit the container?
backgroundImageStretch: false
});
// google fonts API key: https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDk3o9XW7qKxy9-Oa1R7IUM2E_iJbmDhj8
// Define an array with all fonts
//var fonts = ["Pacifico", "VT323", "Quicksand", "Inconsolata"];
var fonts = ["Aguafina Script","Akronim","Alex Brush","Anton","Raleway","Modak","Roboto Mono","Merriweather","Noto Sans","Playfair Display","Ubuntu","Titillium Web","Noto Serif","Rubik","Crimson Pro","Inconsolata","Arimo","Quicksand","Heebo","Nunito Sans","Fjalla One","Oxygen","Crimson Text","Bitter","Libre Baskerville","Karla","Cabin","Josefin Sans","Hind","Saira Stencil One","Indie Flower","Source Code Pro","Lobster","Libre Franklin","Arvo","Abel","Mukta","Dancing Script","Varela Round","Pacifico","Farro","Barlow","Shadows Into Light","Abril Fatface","Teko","Monda","Acme"];
//add input box style text area
var text1 = new fabric.Text("Text", {
id: "id_text1",
fontSize: 50,
selectable: false,
left: 100,
top: 100,
text: "text1",
fill: '#000'
});
canvas.add(text1).setActiveObject(text1);
//populate the font dropdown
fonts.unshift('Times New Roman');
// Populate the fontFamily select
var select = document.getElementById("font-family");
fonts.forEach(function(font) {
var option = document.createElement('option');
option.innerHTML = font;
option.value = font;
select.appendChild(option);
});
// Apply selected font on change
document.getElementById('font-family').onchange = function() {
if (this.value !== 'Times New Roman') {
loadAndUse(this.value);
} else {
canvas.getActiveObject().set("fontFamily", this.value);
canvas.requestRenderAll();
}
};
// Load all fonts using Font Face Observer
function loadAndUse(font) {
var myfont = new FontFaceObserver(font)
myfont.load()
.then(function() {
// when font is loaded, use it.
canvas.getActiveObject().set("fontFamily", font);
canvas.requestRenderAll();
}).catch(function(e) {
console.log(e)
alert('font loading failed ' + font);
});
}
//Font Size #text_size
document.getElementById('text_size').onchange = function() {
canvas.getActiveObject().set("fontSize", this.value);
canvas.requestRenderAll();
}
//Text color #text_color
$("#text_colour").spectrum({
color: "#000000",
showPaletteOnly: true,
change: function(color) {
canvas.getActiveObject().set("fill", color.toHexString());
canvas.requestRenderAll();
},
palette: [
['#000000', '#fafafa', '#c5c5c5'],
['red', 'yellow', 'green', 'blue', 'violet', 'black']
]
});
//canvas controls some will be set to false later on
canvas.getActiveObject().hasControls=true;
canvas.getActiveObject().hasRotatingPoint=true;
canvas.getActiveObject().hasBorders=true;
canvas.getActiveObject().editable=true;
//text input on keyup
$('.input').on('keyup', function() {
id = $(this).attr('id');
val = $(this).attr('data-text');
newtext = $(this).val();
input = $(this);
canvas.getActiveObject().set("text", newtext);
canvas.renderAll();
});
</script>
<script src="http://rawgit.com/bramstein/fontfaceobserver/master/fontfaceobserver.js"></script>
</body>
输入文本：
|字体系列：
|字体大小：
|文本颜色：
var imageUrl=“img/cadru-01-ok23.png”；
var canvas=newfabric.canvas（'c'）；
var text=“”；
canvas.setBackgroundImage（imageUrl，canvas.renderAll.bind（canvas）{
//（可选）向图像添加不透明度lvl
//背景图像不透明度：0.5，
//是否应调整图像大小以适合容器？
背景：错误
});
//谷歌字体API密钥：https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDk3o9XW7qKxy9-Oa1R7IUM2E_iJbmDhj8
//定义包含所有字体的数组
//var字体=[“Pacifico”、“VT323”、“Quicksand”、“Incolata”]；
var fonts=[“Aguafina脚本”、“Akronim”、“Alex Brush”、“Anton”、“Raleway”、“Modak”、“Roboto Mono”、“Merriweather”、“Noto Sans”、“Playfair Display”、“Ubuntu”、“Titillium Web”、“Noto Serif”、“Rubik”、“Crimson Pro”、“Incolata”、“Arimo”、“Quicksand”、“Heebo”、“Nunito Sans”、“Fjalla One”、“氧气”、“Crimson Text”、“Bitter”、“Libre Baskerville”、“Karla”、“Cabin”，“Josefin Sans”、“Hind”、“Saira Stencil One”、“Indie Flower”、“Source Code Pro”、“Lobster”、“Libre Franklin”、“Arvo”、“Abel”、“Mukta”、“Dancing Script”、“Varela Round”、“Pacifico”、“Farro”、“Barlow”、“Shadows to Light”、“Abril Fatface”、“Teko”、“Monda”、“Acme”]；
//添加输入框样式文本区域
var text1=new fabric.Text（“Text”{
id:“id_text1”，
尺寸：50，
可选：false，
左:100,，
前100名，
文本：“文本1”，
填写：“#000”
});
canvas.add（text1）.setActiveObject（text1）；
//填充字体下拉列表
字体.unshift（'Times New Roman'）；
//填充选择的fontFamily
var select=document.getElementById（“字体系列”）；
fonts.forEach（函数（字体）{
var option=document.createElement（'option'）；
option.innerHTML=font；
option.value=font；
选择.appendChild（选项）；
});
//更改时应用所选字体
document.getElementById（'font-family'）。onchange=function（）{
如果（this.value！=='Times New Roman'）{
loadAndUse（此.value）；
}否则{
canvas.getActiveObject（）.set（“fontFamily”，this.value）；
canvas.requestRenderal（）；
}
};
//使用字体面观察者加载所有字体
函数加载和使用（字体）{
var myfont=新FontFaceObserver（字体）
myfont.load（）
.然后（函数（）{
//加载字体时，请使用它。
canvas.getActiveObject（）.set（“fontFamily”，字体）；
canvas.requestRenderal（）；
}).catch（函数（e）{
控制台日志（e）
警报（“字体加载失败”+字体）；
});
}
//字体大小#文本大小
document.getElementById（'text_size'）。onchange=function（）{
canvas.getActiveObject（）.set（“fontSize”，this.value）；
canvas.requestRenderal（）；
}
//文字颜色#文字颜色
$（“文字颜色”）.光谱({
颜色：“000000”，
仅限ShowPalette：正确，
更改：功能（颜色）{
canvas.getActiveObject（）.set（“fill”，color.toHexString（））；
canvas.requestRenderal（）；
},
调色板：[
['000000'、'fafafa'、'c5c5']，
[‘红色’、‘黄色’、‘绿色’、‘蓝色’、‘紫色’、‘黑色’]
]
});
//画布控件有些稍后将设置为false
canvas.getActiveObject（）.hasControls=true；
canvas.getActiveObject（）.hasRotatingPoint=true；
canvas.getActiveObject（）.hasBorders=true；
canvas.getActiveObject（）.editable=true；
//键盘上的文本输入
$（'.input'）。在（'keyup'，function（）上{
id=$（this.attr（'id'）；
val=$（this.attr（'data-text'）；
newtext=$（this.val（）；
输入=$（此项）；
canvas.getActiveObject（）.set（“文本”，newtext）；
canvas.renderAll（）；
});
我也没有收到任何javascript错误。如果有人帮我指出我做错了什么，我将不胜感激。您正在初始化时将
selective:false，