大凤凰
大凤凰
  • 发布:2020-09-24 09:52
  • 更新:2021-09-01 16:31
  • 阅读:4718

uniapp中app端是否支持svg绘制,如何使用<path>,<line>这些svg标签?

分类:uni-app
2020-09-24 09:52 负责人:无 分享
已邀请:
大凤凰

大凤凰 (作者)

已解决,采用renderjs方案解决,uniapp部分代码如下:

<template>
<view class="content" id="content">
<view @click="svgs.onClick" :prop="option" :change:prop="svgs.updateSvgs" id="svgs" class="svgs"></view>
<button @click="changeOption">更新数据</button>
</view>
</template>

<script>
export default {
data() {
return {
option: {
status: false
}
}
},
onLoad() {
console.log(this.option.status)
},
methods: {
changeOption() {
const data = this.option.series[0].data
// 随机更新示例数据
data.forEach((item, index) => {
data.splice(index, 1, Math.random() * 40)
})
},
onViewClick(options) {
console.log(options)
}
}
}
</script>

<script module="svgs" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.svgs === 'function') {
this.initSvgs()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/svg.js'
script.onload = this.initSvgs.bind(this)
document.head.appendChild(script)
}
},
methods: {
initSvgs() {
let that = this;
var draw = SVG().addTo('#svgs').size(315, 190);
var rect = draw.rect('100%', '100%').attr({ fill: '#f06' });

            draw.path('M142.817,69.875 C142.498,63.851 146.538,60.373 154.76,60.373 C165.471,60.373 166.731,62.568 167.25,67.75 C168.052,75.759 163.499,82.112 163.499,85.629 C163.499,89.1455 171.692,130.955 155.574,131.701 C139.4555,132.447 147.601,89.8835 147.601,85.7275 C147.6005,81.5715 143.1355,75.899 142.8165,69.875 Z').attr({fill: '#eef5fe'}).click(function() {  
                that.option.status = !that.option.status;  
                if(that.option.status){  
                    this.fill({ color: '#cbe0fd' })  
                }else{  
                    this.fill({ color: '#eef5fe' })  
                }  
            })  
        },  
        updateSvgs(newValue, oldValue, ownerInstance, instance) {  
            // 监听 service 层数据变更  

        },  
        onClick(event, ownerInstance) {  
            // 调用 service 层的方法  
            // ownerInstance.callMethod('onViewClick', {  
            //  test: 'test'  
            // })  
        }  
    }  
}  

</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.svgs {  
    width: 750rpx;  
    height: 600rpx;  
    background-color: pink;  
}  

</style>

--------------------------------------------------svgjs在线地址:https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js

4***@qq.com

4***@qq.com - 程序猿小白

请问app端svg绘制,具体是怎么解决的呢,有代码可以参考一下吗

该问题目前已经被锁定, 无法添加新回复