Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5993
Star 90
Fork 162
H
hello uni-app x
提交 491f6f7a 编写于 作者: 张 张磊
浏览文件
操作

补充保存图片到相册示例

上级 ec587854
隐藏空白更改
内联 并排
Showing with 359 addition and 12 deletion
pages.json
浏览文件 @ 491f6f7a
...@@ -26,6 +26,12 @@ ...@@ -26,6 +26,12 @@
"navigationBarTitleText": "general-event" "navigationBarTitleText": "general-event"
} }
}, },
{
"path": "pages/component/view/view-draw",
"style": {
"navigationBarTitleText": "DrawableContext"
}
},
{ {
"path": "pages/component/scroll-view/scroll-view", "path": "pages/component/scroll-view/scroll-view",
"style": { "style": {
...@@ -654,6 +660,12 @@ ...@@ -654,6 +660,12 @@
"navigationBarTitleText": "图片预览" "navigationBarTitleText": "图片预览"
} }
}, },
{
"path": "pages/API/save-image-to-album/save-image-to-album",
"style": {
"navigationBarTitleText": "保存图片到相册"
}
},
{ {
"path": "pages/component/scroll-view/scroll-view-refresher", "path": "pages/component/scroll-view/scroll-view-refresher",
"style": { "style": {
......
pages/API/save-image-to-album/save-image-to-album.uvue 0 → 100644
浏览文件 @ 491f6f7a
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<image src="/static/uni.png" style="margin: 30rpx 200rpx;height:350rpx;width: 350rpx;"></image>
<button style="margin: 30rpx;" @click="saveImage">将图片保存到相册</button>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
}
},
methods: {
saveImage() {
uni.saveImageToPhotosAlbum({
filePath:"/static/uni.png",
success() {
uni.showToast({
icon:"none",
title:"图片保存成功，请到相册查看"
})
},
fail(e) {
uni.showToast({
icon:"none",
title:"图片保存失败，"+JSON.stringify(e)
})
}
})
}
}
}
</script>
<style>
</style>
pages/component/picker-view/picker-view.uvue
浏览文件 @ 491f6f7a
...@@ -57,6 +57,9 @@ ...@@ -57,6 +57,9 @@
} }
}, },
methods: { methods: {
clickView() {
},
bindChange(e : PickerViewChangeEvent) { bindChange(e : PickerViewChangeEvent) {
const val = e.detail.value const val = e.detail.value
this.result = val this.result = val
......
pages/component/view/view-draw.uvue 0 → 100644
浏览文件 @ 491f6f7a
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<view ref="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import DrawableContext from 'io.dcloud.uniapp.runtime.DrawableContext';
var y = 160
export default {
data() {
return {
texts: [
'HBuilderX，轻巧、极速，极客编辑器',
'uni-app x，终极跨平台方案',
'uniCloud，js serverless云服务',
'uts，大一统语言',
'uniMPSdk，让你的App具备小程序能力',
'uni-admin，开源、现成的全端管理后台',
'uni-id，开源、全端的账户中心',
'uni-pay，开源、云端一体、全平台的支付',
'uni-ai，聚合ai能力',
'uni-cms，开源、云端一体、全平台的内容管理平台',
'uni-im，开源、云端一体、全平台的im即时消息',
'uni统计，开源、完善、全平台的统计报表',
'......'
] as string[]
}
},
onShow() {
},
onReady() {
this.drawText()
this.drawLines()
this.drawCircles()
this.drawStar()
this.drawhouse()
this.drawPoint()
this.drawRect()
},
onUnload() {
y = 160
},
methods: {
drawText() {
let node = (this.$refs['draw-text-view'] as INode)
let ctx = node.getDrawableContext()
let width = node.getBoundingClientRect().width
ctx!!.reset()
ctx!!.font = "15px"
ctx.textAlign = "center"
for (var i = 0; i < this.texts.length; i++) {
let value = this.texts[i]
if (i % 2 == 0) {
ctx!!.fillText(value, width / 2, (20 * (i + 1)))
} else {
ctx!!.strokeText(value, width / 2, (20 * (i + 1)))
}
}
ctx!!.update()
},
drawLines() {
let ctx = (this.$refs['draw-line-view'] as INode).getDrawableContext()
ctx!!.reset()
ctx!!.lineWidth = 10;
["round", "bevel", "miter"].forEach((join, i) => {
ctx.lineJoin = join;
ctx.beginPath();
ctx.moveTo(5, 10 + i * 40);
ctx.lineTo(50, 50 + i * 40);
ctx.lineTo(90, 10 + i * 40);
ctx.lineTo(130, 50 + i * 40);
ctx.lineTo(170, 10 + i * 40);
ctx.stroke();
});
ctx!!.lineWidth = 1
var space = 170
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10 + space, 10);
ctx.lineTo(140 + space, 10);
ctx.moveTo(10 + space, 140);
ctx.lineTo(140 + space, 140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = 'black';
['butt', 'round', 'square'].forEach((lineCap, i) => {
ctx.lineWidth = 15;
ctx.lineCap = lineCap;
ctx.beginPath();
ctx.moveTo(25 + space + i * 50, 10);
ctx.lineTo(25 + space + i * 50, 140);
ctx.stroke();
});
ctx.lineWidth = 1;
drawDashedLine([], ctx);
drawDashedLine([2, 2], ctx);
drawDashedLine([10, 10], ctx);
drawDashedLine([20, 5], ctx);
drawDashedLine([15, 3, 3, 3], ctx);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
ctx.lineDashOffset = 18;
drawDashedLine([12, 3, 3], ctx);
ctx.lineDashOffset = 0
ctx.setLineDash([0])
ctx!!.update()
},
drawDashedLine(pattern : Array<number>, ctx : DrawableContext) {
ctx.beginPath();
ctx.setLineDash(pattern);
ctx.moveTo(0, y);
ctx.lineTo(300, y);
ctx.stroke();
y += 15;
},
drawCircles() {
let ctx = (this.$refs['draw-circle-view'] as INode).getDrawableContext()
ctx!!.reset()
// Draw shapes
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
ctx!!.beginPath();
var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}
ctx!!.update()
},
drawStar() {
let ctx = (this.$refs['draw-dash-line'] as INode).getDrawableContext()
ctx!!.reset()
ctx!!.beginPath();
var horn = 5; // 画5个角
var angle = 360 / horn; // 五个角的度数
// 两个圆的半径
var R = 50;
var r = 20;
// 坐标
var x = 100;
var y = 100;
for (var i = 0; i < horn; i++) {
// 角度转弧度：角度/180*Math.PI
// 外圆顶点坐标
ctx.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y);
// 內圆顶点坐标
ctx.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y);
}
// closePath：关闭路径，将路径的终点与起点相连
ctx.closePath();
ctx.lineWidth = 3;
ctx.fillStyle = '#E4EF00';
ctx.strokeStyle = "red";
ctx.fill();
ctx.stroke();
ctx.lineWidth = 10;
ctx.beginPath()
ctx.moveTo(170, 100)
ctx.lineTo(255, 15)
ctx.lineTo(340, 100)
ctx.closePath()
ctx.fill()
ctx.strokeStyle = "blue"
ctx.stroke()
ctx.beginPath()
ctx.moveTo(170, 145)
ctx.lineTo(255, 45)
ctx.lineTo(340, 145)
ctx.closePath()
ctx.fill()
ctx.strokeStyle = "gray"
ctx.stroke()
// 未设置beginPath，导致上下表现一致，与前端一致
ctx.moveTo(170, 190)
ctx.lineTo(255, 90)
ctx.lineTo(340, 190)
ctx.closePath()
ctx.fillStyle = "orange"
ctx.fill()
ctx.strokeStyle = "khaki"
ctx.stroke()
ctx!!.update()
},
hex(num : number) : string {
if (num == 0) {
return "00"
}
let hexChars = "0123456789ABCDEF";
let result = "";
while (num > 0) {
let remainder : Int = num.toInt() % 16;
result = hexChars[remainder] + result;
num = Math.floor(num.toInt() / 16);
}
if (result.length == 1) {
return "0" + result
}
return result
},
drawhouse() {
let ctx = (this.$refs['draw-house'] as INode).getDrawableContext()
ctx!!.reset()
ctx!!.lineWidth = 10;
// Wall
ctx.strokeRect(75, 140, 150, 110);
// Door
ctx.fillRect(130, 190, 40, 60);
// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
ctx!!.update()
},
drawPoint() {
let ctx = (this.$refs['draw-style'] as INode).getDrawableContext()
ctx!!.reset()
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx!!.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
ctx.stroke();
}
}
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx!!.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
ctx.fillRect(180 + j * 25, i * 25, 25, 25);
}
}
ctx!!.update()
},
drawRect() {
let ctx = (this.$refs['draw-odd'] as INode).getDrawableContext()
ctx!!.reset()
// Create path
ctx!!.moveTo(30, 90);
ctx.lineTo(110, 20);
ctx.lineTo(240, 130);
ctx.lineTo(60, 130);
ctx.lineTo(190, 20);
ctx.lineTo(270, 90);
ctx.closePath();
// Fill path
ctx.fillStyle = "green";
ctx.fill("evenodd");
ctx!!.update()
}
}
}
</script>
<style>
</style>
\ No newline at end of file
pages/component/view/view.uvue
浏览文件 @ 491f6f7a
...@@ -232,8 +232,9 @@ ...@@ -232,8 +232,9 @@
</view> </view>
</view> </view>
</view> </view>
<button class="uni-common-mt" @click="goGeneralAttribute">更多属性测试</button> <button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/general-attribute')">更多属性测试</button>
<button class="uni-common-mt" @click="goGeneralEvent">更多事件测试</button> <button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/general-event')">更多事件测试</button>
<button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/view-draw')">DrawableContext</button>
</view> </view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
...@@ -243,16 +244,11 @@ ...@@ -243,16 +244,11 @@
<script> <script>
export default { export default {
methods: { methods: {
goGeneralAttribute(){ goGeneralAttribute(path:string){
uni.navigateTo({ uni.navigateTo({
url: '/pages/component/view/general-attribute' url: path
}) })
}, }
goGeneralEvent(){
uni.navigateTo({
url: '/pages/component/view/general-event'
})
},
} }
} }
</script> </script>
......
pages/tabBar/API.uvue
浏览文件 @ 491f6f7a
...@@ -306,6 +306,10 @@ ...@@ -306,6 +306,10 @@
name: '图片选择和预览', name: '图片选择和预览',
url: 'preview-image', url: 'preview-image',
}, },
{
name: "保存图片到相册",
url: 'save-image-to-album'
}
/* { /* {
name: "图片选择和拍照", name: "图片选择和拍照",
url: "image", url: "image",
...@@ -510,6 +514,5 @@ ...@@ -510,6 +514,5 @@
.item { .item {
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或