import wx from "./wx"
module.exports = class canvas {
constructor(id, obj) {
this.id = id;
this.obj = obj;
this.cmds = [];
}
generateMethod(method, arg) {
var cmd = "t." + method + "(" + arg.toString() + ");"
this.cmds.push(cmd);
}
generatePro(method, value) {
var cmd = "t." + method + "=\"" + value + "\";";
this.cmds.push(cmd);
}
drawImage(img, ...arg) {
var cmd = "drawImage(" + "\"" + img + "\"," + arg.toString() + ");"
this.cmds.push(cmd);
}
draw(flag, callback) {
var event = weex.requireModule('bmEvents')
event.emit('canvas_cmds_event_' + this.id,{
cmds:this.cmds
});
if (callback != undefined) {
return this.checkCanvasPath(callback);
}
}
checkCanvasPath(callback) {
var that = this;
setTimeout(function () {
var key = that.id + "_canvas";
var storage = weex.requireModule('bmStorage')
const {status, data} = storage.getDataSync(key);
if (status === 0 && data != "") {
return callback();
} else {
that.checkCanvasPath(callback);
}
}, 300);
}
beginPath() {
this.generateMethod("beginPath", []);
}
clip() {
this.generateMethod("clip", []);
//return this.ctx.clip();
}
arc(...arg) {
this.generateMethod("arc", arg);
}
restore(...arg) {
this.generateMethod("restore", arg);
}
save(...arg) {
this.generateMethod("save", arg);
}
lineTo(...arg) {
this.generateMethod("lineTo", arg);
}
moveTo(...arg) {
this.generateMethod("moveTo", arg);
}
closePath(...arg) {
this.generateMethod("closePath", arg);
}
fill() {
if(this.fillStyle != undefined){
this.setFillStyle(this.fillStyle);
}
this.generateMethod("fill", []);
}
fillText(text, ...arg) {
if(this.fillStyle != undefined){
this.setFillStyle(this.fillStyle);
}
var cmd = "t.fillText(" + "\"" + this.toUnicode(text) + "\"," + arg.toString() + ");"
this.cmds.push(cmd);
}
toUnicode(theString) {
var unicodeString = '';
for (var i = 0; i < theString.length; i++) {
var theUnicode = theString.charCodeAt(i).toString(16).toUpperCase();
while (theUnicode.length < 4) {
theUnicode = '0' + theUnicode;
}
theUnicode = '\\u' + theUnicode;
unicodeString += theUnicode;
}
return unicodeString;
}
fillRect(...arg) {
if(this.fillStyle != undefined){
this.setFillStyle(this.fillStyle);
}
var cmd = "f(" +arg.toString() + ");"
this.cmds.push(cmd);
// this.generateMethod("fillRect", arg);
}
measureText(text) {
return {width: 10, height: 10};
// this.generateMethod("measureText",arg);
// var cmd = "t.measureText(" +"\"" + text + "\"," + arg.toString() + ");"
}
quadraticCurveTo(...arg) {
this.generateMethod("quadraticCurveTo", arg);
}
bezierCurveTo(...arg) {
this.generateMethod("bezierCurveTo", arg);
}
rect(...arg) {
this.generateMethod("rect", arg);
}
arcTo(...arg) {
this.generateMethod("arcTo", arg);
}
strokeRect(...arg) {
this.generateMethod("strokeRect", arg);
}
clearRect(...arg) {
this.generateMethod("clearRect", arg);
}
scale(...arg) {
this.generateMethod("scale", arg);
}
rotate(...arg) {
this.generateMethod("rotate", arg);
}
translate(...arg) {
this.generateMethod("translate", arg);
}
strokeText(...arg) {
this.generateMethod("strokeText", arg);
}
transform(...arg) {
this.generateMethod("transform", arg);
}
setFillStyle(arg) {
this.fillStyle = undefined;
this.generatePro("fillStyle", arg);
}
setFontSize(arg) {
// var cmd = "t.font=" + "\"" + arg + "px serif\";"
var cmd = "t.font=" + "\"" + arg + "px Droidsansfallback\";"
this.cmds.push(cmd);
//this.generatePro("font", [arg + 'px sans-serif']);
}
setStrokeStyle(arg) {
this.generatePro("strokeStyle", arg);
}
stroke() {
this.generateMethod("stroke", []);
}
setLineWidth(arg) {
this.generatePro("lineWidth", arg);
}
}
canvas.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
*{
margin: 0;
padding: 0;
}
</style>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
<script>
var count = 0;
var finish_count = 0;
var images = {};
var c=document.getElementById("myCanvas");
var t=c.getContext("2d");
var cmds = "";
var id = "";
function setOption(data){
data = JSON.parse(data);
id = data.id;
c.setAttribute("width",data.width);
c.setAttribute("height",data.height);
if(data.backgroundColor != undefined){
c.setAttribute("style", "background-color:" + data.backgroundColor);
}
var origin_cmds = data.cmds;
for(var i =0;i < origin_cmds.length; ++i){
cmds += origin_cmds[i];
}
cmds.replace(/drawImage\("(.*?)"/g,function (match,image) {
images[image] = "";
count = count+1;
})
for(var key in images) {
drawImageEx(key);
}
if(count == 0){
handle();
}else{
eventHandle();
}
}
function eventHandle(){
setTimeout(function () {
if(finish_count == count){
handle();
}else{
eventHandle();
}
},300);
}
function handle() {
eval(cmds);
getBase64();
}
function getBase64() {
setTimeout(function () {
bmnative.fireEvent('canvas_event_' +id , c.toDataURL());
},300)
}
function drawImageEx(img) {
const image = new Image(10, 10);
image.crossOrigin = 'Anonymous';
image.src = img;
image.onload = function () {
finish_count = finish_count+1;
images[img] = this;
}
}
function drawImage(img,...arg) {
t.drawImage(images[img],...arg);
}
function f(...arg) {
t.fillRect(...arg);
}
</script>
demo.vue
<template>
<div style="margin-top: 100px">
<!-- <bmchart src='bmlocal://assets/w_system/test.html' style="width:750; height:520;" :options="$format(options)"
@finish='finish'></bmchart>-->
<w-canvas style="width: 300px; height: 200px;background-color: yellow" canvas-id="firstCanvas"></w-canvas>
<image :src="image_path" style="width: 300px;height: 300px;"></image>
</div>
</template>
<script>
import canvas from "./../../common/components/canvas"
import wx from "./../../common/wx"
export default {
components:{
"w-canvas": canvas
},
mixins: [require('./../../common/publish').publish],
data() {
return {
image_path:""
}
},
methods: {
finish() {
},
draw1(){
var context = wx.createCanvasContext('firstCanvas')
var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNjZBOTA0NTdFQkQxMUVBOTVGMUNDM0M0MzIyM0RGRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZBOTA0NjdFQkQxMUVBOTVGMUNDM0M0MzIyM0RGRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI2NkE5MDQzN0VCRDExRUE5NUYxQ0MzQzQzMjIzREZFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI2NkE5MDQ0N0VCRDExRUE5NUYxQ0MzQzQzMjIzREZFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+sVlMSgAABlxJREFUeNrkmm1MU1cY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";
// context.drawImage(base64,10,10);
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke();
var that = this;
context.draw(true,function () {
wx.canvasToTempFilePath({
canvasId:"firstCanvas",
success:function (res) {
// wx.alert(res)
that.image_path = res.tempFilePath;
}
})
})
},
draw2(){
var context = wx.createCanvasContext('firstCanvas2')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
},
mounted:function () {
// wx.alert(weex.config.eros.scale);
//wx.alert(WXEnvironment.scale);
this.draw1();
// this.draw2();
}
}
</script>