I have a 360 view of an jpg image in React and inside the image are images of many objects, like a door, Ac,curtain, etc. Now I want to change the color of the images inside, so why should I do it? And if one image of inside changes its color, then another image inside also changes color, then both images should show the changed color.
import "./App.css"; import React from "react"; import ReactDOM from "react-dom"; import { Pannellum } from "pannellum-react"; import myImage from "./images/1-1.jpg"; class App extends React.Component { constructor(props) { super(props); this.state = { doorColor: "#FF0000", }; } componentDidMount() { this.createColorPicker(); } createColorPicker = () => { const colorPicker = document.createElement("input"); colorPicker.setAttribute("type", "color"); colorPicker.setAttribute("value", this.state.doorColor); colorPicker.style.display = "none"; document.body.appendChild(colorPicker); colorPicker.addEventListener("input", () => { const newColor = colorPicker.value; this.setState({ doorColor: newColor }); const door = document.querySelector(".hotspot-container > .door"); if (door) { door.style.fill = newColor; } }); }; handleHotspotClick = (evt, name) => { const colorPicker = document.querySelector("input[type='color']"); if (colorPicker) { colorPicker.click(); } }; render() { return ( <div className="App"> <Pannellum width="100vw" height="100vh" image={myImage} pitch={-11} yaw={100} hfov={130} autoLoad showZoomCtrl={false} onLoad={() => { console.log("panorama loaded"); }} > <Pannellum.Hotspot type="custom" pitch={10} yaw={112} handleClick={(evt, name) => this.handleHotspotClick(evt, name)} name="hs1" /> <svg className="hotspot door" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" > <rect x="12" y="16" width="16" height="24" /> <circle cx="20" cy="28" r="2" /> </svg> </Pannellum> </div> ); } } export default App;
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)