如何解决如何在React中将像js代码这样的组件从另一个前端项目插入到组件函数中?
我想在我的react项目中实现以下scracth前端组件,我已经嵌入了html和css,但是由于jsx无法识别很多语法,所以我不知道将js代码放在哪里。我做?非常感谢您的帮助!
HTML
<figure id="bridgeContainer">
<canvas id="bridge" width="750" height="465"></canvas>
<figcaption>Downtown Calgary in 2013 and 1943; mouse down or touch on photo to reveal</figcaption>
</figure>
SCSS
body { margin: 0; }
#bridge {
display: block;
margin: 0 auto;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
background-image: -webkit-image-set(url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg') 1x,url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943-2x.jpg') 2x );
background-size: cover;
width: 100%;
max-width: 750px;
height: auto;
cursor: crosshair;
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png) 53 53,crosshair;
}
#bridgeContainer {
text-align: center;
font-family: Avenir,sans-serif;
}
#bridgeContainer figcaption {
margin-top: 2rem;
}
这是我想包含在我的react组件中的js
js
var bridge = document.getElementById("bridge"),bridgeCanvas = bridge.getContext('2d'),brushRadius = (bridge.width / 100) * 5,img = new Image();
if (brushRadius < 50) { brushRadius = 50 }
img.onload = function(){
bridgeCanvas.drawImage(img,bridge.width,bridge.height);
}
img.loc = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/';
img.filename = 'calgary-bridge-2013.jpg';
if (window.devicePixelRatio >= 2) {
var nameParts = img.filename.split('.');
img.src = img.loc + nameParts[0]+"-2x"+"."+nameParts[1];
} else {
img.src = img.loc + img.filename;
}
function detectLeftButton(event) {
if ('buttons' in event) {
return event.buttons === 1;
} else if ('which' in event) {
return event.which === 1;
} else {
return event.button === 1;
}
}
function getBrushPos(xRef,yRef) {
var bridgeRect = bridge.getBoundingClientRect();
return {
x: Math.floor((xRef-bridgeRect.left)/(bridgeRect.right-bridgeRect.left)*bridge.width),y: Math.floor((yRef-bridgeRect.top)/(bridgeRect.bottom-bridgeRect.top)*bridge.height)
};
}
function drawDot(mouseX,mouseY){
bridgeCanvas.beginPath();
bridgeCanvas.arc(mouseX,mouseY,brushRadius,2*Math.PI,true);
bridgeCanvas.fillStyle = '#000';
bridgeCanvas.globalCompositeOperation = "destination-out";
bridgeCanvas.fill();
}
bridge.addEventListener("mousemove",function(e) {
var brushPos = getBrushPos(e.clientX,e.clientY);
var leftBut = detectLeftButton(e);
if (leftBut == 1) {
drawDot(brushPos.x,brushPos.y);
}
},false);
bridge.addEventListener("touchmove",function(e) {
e.preventDefault();
var touch = e.targettouches[0];
if (touch) {
var brushPos = getBrushPos(touch.pageX,touch.pageY);
drawDot(brushPos.x,brushPos.y);
}
},false);
反应组件Fourth.js
import React from "react";
import styled from "styled-components";
function Fourth() {
return (
<Wrapper>
<link rel="stylesheet" href="assets/css/main4.css" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<section id="banner">
<div class="inner">
<p>scrape the picture..</p>
<figure id="bridgeContainer">
<canvas id="bridge" width="750" height="465"></canvas>
<figcaption>Downtown Calgary in 2013 and 1943; mouse down or touch on photo to reveal</figcaption>
</figure>
</div>
</section>
</Wrapper>
);
}
const Wrapper = styled.div`
/* omitted */
`;
export default Fourth;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。