实际上我要通过使用富文本编辑器来实现不同风格的文本,但是我发现并没有一个富文本编辑器可以设置文本描边,于是我想编写一个关于文字描边的插件.但是我不知道如何通过 css 来设置文本描边来得到这样的效果
<script setup lang="ts">
import { onMounted } from 'vue'
import Konva from 'konva';
const konvaInit = () => {
const stage = new Konva.Stage({
container: 'target',
width: 400,
height: 400
})
var layer = new Konva.Layer();
var simpleText = new Konva.Text({
x: 0,
y: stage.width() / 2,
text: 'Simple Text',
fontSize: 50,
fontFamily: 'Calibri',
fill: 'green',
stroke: 'white',
strokeWidth: 10,
lineJoin: 'round',
fillAfterStrokeEnabled: true
});
layer.add(simpleText);
stage.add(layer);
}
onMounted(konvaInit)
</script>
<template>
<div class="test">
test text
</div>
<div class="test2">
test text
</div>
<div id="target" class="text3"></div>
</template>
<style scoped>
.test {
font-size: 80px;
color: black;
text-shadow: -10px -10px 10px blue,
10px -10px 10px blue,
-10px 10px 10px blue,
10px 10px 10px blue;
}
.test2 {
font-size: 80px;
color: black;
-webkit-text-stroke: 10px blue;
}
.text3 {
width: 400px;
height: 400px;
background-color: black;
}
</style>