Reactでのマウス操作で画像位置変更
前回クリスマスを理由に雪を降らせたWebアプリを作成しました。
elsammit-beginnerblg.hatenablog.com
こちらのWebアプリに表示させていた画像位置を簡単に変更させたいな！！
出来れば、マウス操作で位置変更できると便利そうだな！！
と思い、マウス操作で画像位置変更方法を調べてみましたので、こちらをまとめようと思います。
■環境
今回はこちらの環境で動作させました。
・Ubuntu16.04(VirtualBox上)
■マウス操作での画像位置移動
まずはマウスボタン押下して画像を移動させる方法について、です。
紹介する方法を実行するとこちらのような結果となります。
ではこちらのようにマウス操作で画像を移動させるためのコードはこちらになります。
※必要なコードのみ抜粋します。
export default class Snow extends Component {
constructor (props) {
super(props);
this.state = {
Tide:Tide,
image_X:830,
image_Y:550,
x: 0,
y: 0,
isDrag: false,
};
this.handleDown = this.handleDown.bind(this);
this.handleMove = this.handleMove.bind(this);
this.handleUp = this.handleUp.bind(this);
}
handleDown = (e) =>{
const item = this.node;
const x = e.pageX - item.offsetLeft;
const y = e.pageY - item.offsetTop;
this.setState({ isDrag: true, x, y });
}
handleMove = (e) => {
if (this.state.isDrag) {
e.preventDefault();
this.setState({
image_Y: e.pageY - this.state.y,
image_X: e.pageX - this.state.x,
});
}
}
handleUp = () => {
this.setState({ isDrag: false })
}
render() {
const {image_X} = this.state;
const {image_Y} = this.state;
const {Tide} = this.state;
var ImX = image_X;
var ImY = image_Y;
return (
<div>
<div>
<img src={Tide} alt="Tide" id="TideImg" className="Tide" style={{left:ImX, top:ImY}} onMouseDown={this.handleDown}
onMouseMove={this.handleMove}
onMouseUp={this.handleUp}
onMouseLeave={this.handleUp}
ref={(node) => { this.node = node; }} />
</div>
</div>
);
}
}では、コードの紹介です。
まずは画像を表示させるタグに対して、
”onMouseDown”、"onMouseMove"、"onMouseUp"、"onMouseLeave"
を定義します。
マウスのクリック中かマウス移動中かを判定するためのイベント定義ですね。
<img src={Tide} alt="Tide" id="TideImg" className="Tide" style={{left:ImX, top:ImY}} onMouseDown={this.handleDown}
onMouseMove={this.handleMove}
onMouseUp={this.handleUp}
onMouseLeave={this.handleUp}
ref={(node) => { this.node = node; }} />それぞれマウスイベント発行時の動作はこちらの通りになります。
【マウス移動】
handleMove = (e) => {
if (this.state.isDrag) {
e.preventDefault();
this.setState({
image_Y: e.pageY - this.state.y,
image_X: e.pageX - this.state.x,
});
}
}isDragフラグがON中であればマウスの移動に合わせて、
image_Y、image_Xの位置を変更させております。
image_Y、image_Xは画像のXY位置を示すデータとなります。
【マウスクリック】
handleDown = (e) =>{
const item = this.node;
const x = e.pageX - item.offsetLeft;
const y = e.pageY - item.offsetTop;
this.setState({ isDrag: true, x, y });
}
handleUp = () => {
this.setState({ isDrag: false })
}isDragをクリック時にはON、外した時はOFFし、
クリック時にクリックした時の画像位置を保存しています。
■マウスクリック時のクリック位置に画像移動
次にマウスクリック時の位置指定になります。
こんな感じの動作になります。
コードはこんな感じです。
export default class Snow extends Component {
constructor (props) {
super(props);
this.state = {
Tide:Tide,
};
}
testClick = (e) =>{
var element = document.getElementById( "TideImg" );
var width = element.naturalWidth;
var height = element.naturalHeight;
this.setState({image_X:e.screenX });
this.setState({image_Y:e.screenY - height});
}
render() {
const {position} = this.state;
const {image_X} = this.state;
const {image_Y} = this.state;
const {City} = this.state;
const {Tide} = this.state;
var Pos = position;
var ImX = image_X;
var ImY = image_Y;
return (
<div>
<input type="file" ref="file" onChange={this.uploadFile} />
<input type="file" ref="file" onChange={this.uploadFileTide} />
<button onClick={this.AddImage}>click Here</button>
<div className="layout" style={{ height: 850, width: 1850 onClick={this.testClick}>
<img src={Tide} alt="Tide" id="TideImg" className="Tide" style={{left:ImX, top:ImY}} />
</div>
</div>
);
}
}testClickというクリックイベントを定義し、
testClick関数として、
testClick = (e) =>{
var element = document.getElementById( "TideImg" );
var width = element.naturalWidth;
var height = element.naturalHeight;
this.setState({image_X:e.screenX });
this.setState({image_Y:e.screenY - height});
}というように、
e.screenX、e.screenYでクリックした位置を取得、そちらに画像を移動させる処理を実行している形になります！！
