interface Web
js tutoriel
Comment implémenter la classe de commande de classe de commande dans konva.js pour prendre en charge les fonctions d'annulation et de rétablissement?
Comment implémenter la classe de commande de classe de commande dans konva.js pour prendre en charge les fonctions d'annulation et de rétablissement?
Apr 04, 2025 pm 04:30 PM
Implémentation de la fonction REDO UNDO basée sur le mode de commande dans konva.js
Cet article présente comment utiliser le mode de commande pour implémenter les fonctions UNDO (CTRL Z) et Redoo (Ctrl y) dans l'application de dessin Konva.js. Nous encapsulons les opérations graphiques dans des objets de commande et gérons ces opérations à l'aide d'une pile de commandes pour réaliser et progresser dans l'édition graphique.
Définissez d'abord une classe Command de base:
Classe Commande {
constructeur () {
this.states = []; // utilisé pour stocker des instantanés d'état}
exécuter() {
Jetez une nouvelle erreur (?la méthode d'exécution doit être implémentée?);
}
undo () {
Jetez une nouvelle erreur (?Méthode UNO doit être implémentée?);
}
Savestate (état) {
this.states.push (état);
}
Restorestate () {
return this.states.pop () || nul; // retour à l'état précédent, ou nul
}
}
Ensuite, créez une classe de commande spécifique, comme la commande pour dessiner un rectangle:
class DrawrectangleCommand étend la commande {
constructeur (étape, couche, rec) {
super();
this.stage = stage;
this.layer = couche;
this.rect = rect;
}
exécuter() {
this.savestate (this.layer.tojson ()); // Enregistrer l'état de couche actuel this.layer.add (this.rect);
this.layer.draw ();
}
undo () {
this.rect.destroy ();
const prevState = this.RestoreState ();
if (prevState) {
this.layer.destroychildren (); // efface la couche this.layer = konva.node.create (prevState, this.stage); // restaurer l'état précédent this.stage.add (this.layer);
this.layer.draw ();
}
}
}
Ensuite, implémentez le gestionnaire de commande:
classe CommandManager {
constructeur () {
this.undostack = [];
this.redostack = [];
}
EXECTIONCOMAND (Commande) {
Command.execute ();
this.undostack.push (commande);
this.redostack = []; // Après l'exécution de la nouvelle commande, effacez la pile de rétrochatrice}
undo () {
if (this.undostack.length === 0) return;
const command = this.undostack.pop ();
Command.undo ();
this.redostack.push (commande);
}
redo () {
if (this.redostack.length === 0) return;
const command = this.redostack.pop ();
Command.execute ();
this.undostack.push (commande);
}
}
Enfin, utilisez dans l'application Konva.js:
const stage = new konva.stage ({{
conteneur: ?conteneur?,
Largeur: fenêtre.innerwidth,
hauteur: fenêtre.innerheight
});
const compyer = new konva.layer ();
stage.add (couche);
const commandManager = new CommandManager ();
stage.on ('click', (e) => {
const rect = new Konva.rect ({
x: e.evt.layerx,
y: e.evt.layery,
Largeur: 50,
hauteur: 50,
Remplir: ?rouge?,
draggable: vrai
});
const command = new DrawrectangleCommand (étape, couche, rect);
CommandManager.ExECUTECommand (Command);
});
document.addeventListener ('keydown', (e) => {
if (e.ctrlkey && e.key === 'z') {
CommandManager.undo ();
} else if (e.ctrlkey && e.key === 'y') {
CommandManager.redo ();
}
});
Ce code implémente le dessin rectangulaire simple et l'annulation de la refonte. Vous pouvez étendre Command pour prendre en charge d'autres opérations graphiques telles que le mouvement, la mise à l'échelle, la rotation, etc. N'oubliez pas de sauvegarder l'état actuel dans la méthode execute de chaque opération et de restaurer l'état précédent dans la méthode undo . Cela garantira que votre fonctionnalité de rétablissement d'annulation fonctionne correctement.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser PHP pour créer des fonctions de partage social PHP Partage d'interface Pratique
Jul 25, 2025 pm 08:51 PM
La méthode principale de création de fonctions de partage social dans PHP est de générer dynamiquement des liens de partage qui répondent aux exigences de chaque plate-forme. 1. Obtenez d'abord la page actuelle ou les informations d'URL et d'article spécifiées; 2. Utilisez UrLencode pour coder les paramètres; 3. épisser et générer des liens de partage en fonction des protocoles de chaque plate-forme; 4. Afficher les liens sur l'avant pour que les utilisateurs puissent cliquer et partager; 5. Générez dynamiquement des balises OG sur la page pour optimiser l'affichage du contenu du partage; 6. Assurez-vous d'échapper à la saisie des utilisateurs pour empêcher les attaques XSS. Cette méthode ne nécessite pas d'authentification complexe, a de faibles co?ts de maintenance et convient à la plupart des besoins de partage de contenu.
Comment utiliser PHP combiné avec l'IA pour obtenir la correction de texte de la syntaxe PHP détection et l'optimisation
Jul 25, 2025 pm 08:57 PM
Pour réaliser la correction d'erreur de texte et l'optimisation de la syntaxe avec l'IA, vous devez suivre les étapes suivantes: 1. Sélectionnez un modèle ou une API d'IA appropriée, tels que Baidu, Tencent API ou bibliothèque NLP open source; 2. Appelez l'API via Curl ou Guzzle de PHP et traitez les résultats de retour; 3. Afficher les informations de correction d'erreur dans l'application et permettre aux utilisateurs de choisir d'adopter l'adoption; 4. Utilisez PHP-L et PHP_CODESNIFFER pour la détection de syntaxe et l'optimisation du code; 5. Collectez en continu les commentaires et mettez à jour le modèle ou les règles pour améliorer l'effet. Lorsque vous choisissez AIAPI, concentrez-vous sur l'évaluation de la précision, de la vitesse de réponse, du prix et du support pour PHP. L'optimisation du code doit suivre les spécifications du PSR, utiliser le cache raisonnablement, éviter les requêtes circulaires, revoir le code régulièrement et utiliser x
PHP appelle AI Intelligent Voice Assistant Assistant PHP Interaction System Construction
Jul 25, 2025 pm 08:45 PM
L'entrée vocale de l'utilisateur est capturée et envoyée au backend PHP via l'API MediaRecorder du JavaScript frontal; 2. PHP enregistre l'audio en tant que fichier temporaire et appelle STTAPI (tel que Google ou Baidu Voice Recognition) pour le convertir en texte; 3. PHP envoie le texte à un service d'IA (comme Openaigpt) pour obtenir une réponse intelligente; 4. PHP appelle ensuite TTSAPI (comme Baidu ou Google Voice Synthesis) pour convertir la réponse en fichier vocal; 5. PHP diffuse le fichier vocal vers l'avant pour jouer, terminant l'interaction. L'ensemble du processus est dominé par PHP pour assurer une connexion transparente entre toutes les liens.
PHP réalise la gestion des stocks de produits de base et la monétisation de la synchronisation et du mécanisme d'alarme de l'inventaire PHP
Jul 25, 2025 pm 08:30 PM
PHP assure l'atomicité de la déduction des stocks via les transactions de base de données et les verrous en ligne de Forupdate pour empêcher la survente élevée élevée en simultation; 2. La cohérence de l'inventaire multiplateforme dépend de la gestion centralisée et de la synchronisation axée sur les événements, combinant des notifications API / WebHook et des files d'attente de messages pour assurer une transmission fiable de données; 3. Le mécanisme d'alarme doit définir un faible inventaire, un inventaire zéro / négatif, des ventes invidables, des cycles de réapprovisionnement et des stratégies de fluctuations anormales dans différents scénarios, et sélectionner Dingtalk, SMS ou les personnes responsables par e-mail en fonction de l'urgence, et les informations d'alarme doivent être complètes et claires pour réaliser l'adaptation et la réponse rapide.
Comment utiliser PHP pour appeler les outils auxiliaires de l'écriture AI PHP améliore l'efficacité de sortie du contenu
Jul 25, 2025 pm 08:18 PM
Lorsque vous choisissez une API d'écriture AI, vous devez examiner la stabilité, le prix, la correspondance des fonctions et s'il y a un essai gratuit; 2. PHP utilise Guzzle pour envoyer des demandes de poste et utilise JSON_DECODE pour traiter les données JSON renvoyées, faire attention à la capture d'exceptions et de codes d'erreur; 3. L'intégration du contenu AI dans le projet nécessite un mécanisme d'audit et soutenir la personnalisation personnalisée; 4. Le cache, la file d'attente asynchrone et la technologie de limitation actuelle peuvent être utilisées pour optimiser les performances afin d'éviter les goulots d'étranglement en raison de la concurrence élevée.
Les 10 meilleurs sites Web de marché des crypto-monnaies les plus autoritaires au monde (la dernière version de 2025)
Jul 29, 2025 pm 12:48 PM
Les dix principales plateformes de marché de crypto-monnaie et d'analyse de données faisant autorité en 2025 sont: 1. CoinmarketCap, fournissant des classements de capitalisation boursière complets et des données de marché de base; 2. Coingecko, fournissant une évaluation de projet multidimensionnelle avec des scores d'indépendance et de confiance; 3. TradingView, ayant les cartes K-Line les plus professionnelles et les outils d'analyse technique; 4. Marché de la binance, fournissant les données les plus directes en temps réel comme le plus grand échange; 5. Marché d'Ouyi, mettant en évidence des indicateurs dérivés clés tels que le volume de position et le taux de capital; 6. Glassnode, en se concentrant sur les données sur cha?ne telles que les adresses actives et les tendances des baleines géantes; 7. Messari, fournissant des rapports de recherche au niveau institutionnel et des données strictes strictes; 8. Cryptocompa
Twilio Call Keeping and Recovery: Mode Mode avec un traitement indépendant des jambes d'appel
Jul 25, 2025 pm 08:42 PM
Cet article élabore sur deux méthodes principales pour réaliser Call Hold et Unbanding in Twilio. L'option préférée est de tirer parti de la fonctionnalité de conférence de Twilio pour activer facilement la rétention et la récupération des appels en mettant à jour les ressources des participants de la conférence et pour personnaliser la rétention musicale. Une autre approche consiste à traiter les jambes d'appel indépendantes, qui nécessitent une logique Twiml plus complexe, passée et arrivée la gestion, mais qui est plus lourde que le mode de réunion. L'article fournit des exemples de code spécifiques et des étapes de fonctionnement pour aider les développeurs à implémenter efficacement le contr?le des appels Twilio.
Obtenez une alternative à une valeur de colonne spécifiée dans un tableau
Jul 25, 2025 pm 07:39 PM
Cet article vise à fournir une alternative à l'obtention de la valeur de colonne spécifiée d'un tableau en PHP et à résoudre le problème de la définition répétée de la fonction Array_Column (). Pour les anciennes versions de PHP et de nouvelles versions de PHP, les solutions correspondantes sont données respectivement et des exemples de code sont fournis pour aider les développeurs à de meilleures données de réseaux de processus.
