Skip to content

Instantly share code, notes, and snippets.

@lazyTai
Created May 5, 2018 08:21
Show Gist options
  • Save lazyTai/e0a5c1ae919e49524db8d7cd801d9f2e to your computer and use it in GitHub Desktop.
Save lazyTai/e0a5c1ae919e49524db8d7cd801d9f2e to your computer and use it in GitHub Desktop.
import React from 'react'
import {connect} from 'react-redux';
import {Route, Switch,} from 'dva/router'
import Konva from 'konva'
import {Stage, Layer, Rect, Text} from 'react-konva';
class MegerCanvas extends React.Component {
showImageO(beauty) {
var mycv = document.getElementById("canvasForO");
var ctx = mycv.getContext("2d");
ctx.drawImage(beauty, 0, 0);
}
showImageHalfUp(beauty) {
var mycv = document.getElementById("canvasForNew");
var ctx = mycv.getContext("2d");
var beautyW = beauty.width
var beautyH = beauty.height
ctx.drawImage(beauty,
0, 0, beautyW, beautyH / 2,
beautyW, beautyH + beautyH / 2, beautyW, beautyH / 2);
}
showImageRight(beauty) {
var mycv = document.getElementById("canvasForNew");
var ctx = mycv.getContext("2d");
var beautyW = beauty.width;
var beautyH = beauty.height;
ctx.drawImage(beauty,
0, 0, beautyW, beautyH,
beautyW, beautyH / 2, beautyW, beautyH);
}
showImageHalfDown(beauty) {
var mycv = document.getElementById("canvasForNew");
var ctx = mycv.getContext("2d");
var beautyW = beauty.width
var beautyH = beauty.height
ctx.drawImage(beauty,
0, beautyH / 2, beautyW, beautyH / 2,
beautyW, 0, beautyW, beautyH / 2);
}
showImageLeft1(beauty) {
var mycv = document.getElementById("canvasForNew");
var ctx = mycv.getContext("2d");
var beautyW = beauty.width;
var beautyH = beauty.height;
ctx.drawImage(beauty,
0, 0, beautyW, beautyH,
0, 0, beautyW, beautyH);
}
showImageLeft2(beauty) {
var mycv = document.getElementById("canvasForNew");
var ctx = mycv.getContext("2d");
var beautyW = beauty.width;
var beautyH = beauty.height;
ctx.drawImage(beauty,
0, 0, beautyW, beautyH,
0, beautyH, beautyW, beautyH);
}
render() {
return <div>
<canvas id="canvasForO" width={1000} height={1000} style={{background: "red"}}></canvas>
<canvas id="canvasForNew" width={1000} height={1000} style={{background: "#eee"}}></canvas>
</div>
}
componentDidMount() {
var image = new Image();
image.src = "http://p7whtc26y.bkt.clouddn.com/18-4-30/62319414.jpg"
image.onload = () => {
this.showImageO(image)
this.showImageLeft1(image)
this.showImageLeft2(image)
this.showImageHalfDown(image)
this.showImageRight(image)
this.showImageHalfUp(image)
}
}
}
function mapStateToProps(state) {
return {store: state}
}
export default connect(mapStateToProps)(MegerCanvas)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment