Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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.


What I have tried:

JavaScript
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;
Posted
Updated 28-Feb-23 1:37am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900