|
@@ -652,6 +652,10 @@ export default {
|
|
value: 'robot',
|
|
value: 'robot',
|
|
img: require('../../assets/teacherdev/img2.png')
|
|
img: require('../../assets/teacherdev/img2.png')
|
|
},
|
|
},
|
|
|
|
+ {
|
|
|
|
+ value: 'iconFont',
|
|
|
|
+ img: require('../../assets/teacherdev/img1.png')
|
|
|
|
+ },
|
|
]
|
|
]
|
|
// let fontArray = [
|
|
// let fontArray = [
|
|
// "FZLTH",
|
|
// "FZLTH",
|
|
@@ -682,12 +686,13 @@ export default {
|
|
// ];
|
|
// ];
|
|
|
|
|
|
let fontSelectHTML =
|
|
let fontSelectHTML =
|
|
- '<div class="font-select-box"><input class="font-select-value" value="" /><ul #fontselect class="form-select font-selector font-select-list">';
|
|
|
|
|
|
+ '<div class="font-select-box tui-image-editor-button"><input class="font-select-value" value="FZLTH" readonly /><label>字体</label><ul #fontselect class="form-select font-selector font-select-list">';
|
|
for (let i = 0; i < fontArray.length; i++) {
|
|
for (let i = 0; i < fontArray.length; i++) {
|
|
|
|
+ let classname = i===0 ? 'active' : ''
|
|
fontSelectHTML +=
|
|
fontSelectHTML +=
|
|
'<li value="' +
|
|
'<li value="' +
|
|
fontArray[i].value +
|
|
fontArray[i].value +
|
|
- '" ><img src="'+fontArray[i].img+'" /></li>';
|
|
|
|
|
|
+ '" class="'+classname+'"><img src="'+fontArray[i].img+'" /></li>';
|
|
}
|
|
}
|
|
fontSelectHTML += "</ul></div>";
|
|
fontSelectHTML += "</ul></div>";
|
|
|
|
|
|
@@ -695,14 +700,20 @@ export default {
|
|
".tui-image-editor-menu-text .tie-text-effect-button"
|
|
".tui-image-editor-menu-text .tie-text-effect-button"
|
|
);
|
|
);
|
|
textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
|
|
textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
|
|
-
|
|
|
|
- document
|
|
|
|
- .querySelector(".font-selector li")
|
|
|
|
- .addEventListener("click", (e) =>
|
|
|
|
- console.log($(this))
|
|
|
|
-
|
|
|
|
- // this.TUI_updateFontOnText($(".font-selector li:click").val())
|
|
|
|
- );
|
|
|
|
|
|
+ let _this = this
|
|
|
|
+ $(".font-selector li").click(function () {
|
|
|
|
+ _this.TUI_updateFontOnText($(this).attr("value"))
|
|
|
|
+ $(".font-select-box input").val($(this).attr("value"))
|
|
|
|
+ $(".font-selector").css("display","none")
|
|
|
|
+ $(this).addClass('active').siblings().removeClass('active')
|
|
|
|
+ });
|
|
|
|
+ $(".font-select-box input").click(function(){
|
|
|
|
+ if($(".font-selector").css("display")=='flex'){
|
|
|
|
+ $(".font-selector").css("display","none")
|
|
|
|
+ }else{
|
|
|
|
+ $(".font-selector").css("display","flex")
|
|
|
|
+ }
|
|
|
|
+ })
|
|
this.instance.on("objectActivated", (props) => {
|
|
this.instance.on("objectActivated", (props) => {
|
|
this.TUI_selectedItem = props;
|
|
this.TUI_selectedItem = props;
|
|
this.TUI_updateFontSelected(props);
|
|
this.TUI_updateFontSelected(props);
|
|
@@ -711,7 +722,6 @@ export default {
|
|
this.loading.close();
|
|
this.loading.close();
|
|
},
|
|
},
|
|
TUI_updateFontOnText(font) {
|
|
TUI_updateFontOnText(font) {
|
|
- console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);
|
|
|
|
|
|
|
|
if (font) {
|
|
if (font) {
|
|
this.TUI_selectedFont = font;
|
|
this.TUI_selectedFont = font;
|
|
@@ -727,7 +737,7 @@ export default {
|
|
console.log("TUI_updateFontSelected", layer);
|
|
console.log("TUI_updateFontSelected", layer);
|
|
|
|
|
|
if (layer.fontFamily) {
|
|
if (layer.fontFamily) {
|
|
- document.querySelector(".font-selector").value = layer.fontFamily;
|
|
|
|
|
|
+ document.querySelector(".font-select-box input").value = layer.fontFamily;
|
|
this.TUI_selectedFont = layer.fontFamily;
|
|
this.TUI_selectedFont = layer.fontFamily;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -786,7 +796,7 @@ export default {
|
|
type: undefined,
|
|
type: undefined,
|
|
});
|
|
});
|
|
var aLink = document.createElement("a");
|
|
var aLink = document.createElement("a");
|
|
- aLink.download = "图片名称.jpg"; //这里写保存时的图片名称
|
|
|
|
|
|
+ aLink.download = "书法大师.jpg"; //这里写保存时的图片名称
|
|
aLink.href = URL.createObjectURL(blob);
|
|
aLink.href = URL.createObjectURL(blob);
|
|
aLink.click();
|
|
aLink.click();
|
|
},
|
|
},
|
|
@@ -1141,16 +1151,29 @@ export default {
|
|
.font-select-box{
|
|
.font-select-box{
|
|
position: relative;
|
|
position: relative;
|
|
width: 100px;
|
|
width: 100px;
|
|
|
|
+ display: inline-block;
|
|
input{
|
|
input{
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border: none;
|
|
|
|
+ outline: none;
|
|
|
|
+ display: block;
|
|
|
|
+ margin-bottom: 2px;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ padding: 0 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.font-select-list{
|
|
.font-select-list{
|
|
display: flex;
|
|
display: flex;
|
|
width: 100px;
|
|
width: 100px;
|
|
flex-flow: wrap;
|
|
flex-flow: wrap;
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 30px;
|
|
|
|
+ display: none;
|
|
|
|
+ max-height: 120px;
|
|
|
|
+ overflow: auto;
|
|
li{
|
|
li{
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
font-size: 0;
|
|
font-size: 0;
|
|
@@ -1159,6 +1182,12 @@ export default {
|
|
img{
|
|
img{
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
+ &:hover{
|
|
|
|
+ background: #cfcfcf;
|
|
|
|
+ }
|
|
|
|
+ &.active{
|
|
|
|
+ background: #dbdbdb;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|